Переключение таблицы стилей с помощью Javascript на основе браузера - PullRequest
Новая
       40

Переключение таблицы стилей с помощью Javascript на основе браузера

4 голосов
/ 07 апреля 2011

В настоящее время я пытаюсь отредактировать веб-сайт для клиента, который использует Adobe Contribute, чтобы он использовал другую таблицу стилей, если пользователь просматривает с мобильного телефона.Таблица стилей мобильного телефона намного проще и убирает фоновые изображения и стили, чтобы сократить время загрузки.Я понимаю, что было бы лучше иметь полностью отдельный веб-сайт для мобильных устройств, но это нецелесообразно для клиента, поскольку он должен иметь возможность обновлять содержимое своих веб-сайтов с помощью Contribute.

Это работает в некоторыхустройства, такие как iPhone (в последний раз я тестировал!), но на моем телефоне Android у меня странная проблема.Когда я захожу на URL или нажимаю на ссылку, он отображает веб-сайт с использованием таблицы стилей по умолчанию.Если я обновлю страницу, то решит показать сайт, созданный с помощью мобильной таблицы стилей.Похоже, что UserAgent не выбирается моим кодом, пока я не нажму кнопку обновить.

Вот код, который я использую: 

<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    var userAgent = navigator.userAgent;

    if(userAgent.search("Mobile")>=0) document.getElementById("stylesheet").href = "css/style_mob.css";

    if(userAgent.search("Nokia")>=0) document.getElementById("stylesheet").href = "css/style_mob.css";

    if(userAgent.search("SymbianOS")>=0) document.getElementById("stylesheet").href = "css/style_mob.css";
</script>

Сценарий отображается только для несколькихустройства, но вы получите общее представление.

Моя строка User Agent выглядит следующим образом:

Mozilla / 5.0 (Linux; U; Android 2.1-update1; en-gb; T-Mobile_G2_Touch Build / ERE27) AppleWebKit / 530.17 (KHTML, как Gecko) Версия / 4.0 Mobile Safari / 530.17

РЕДАКТИРОВАТЬ:

Я должен добавить, что я пытался использовать медиа-запросы, ноэто не работает вообще ни на iPhone, ни на Android.Код выше работает на iPhone.Ниже приведен код, который я использую при попытке выполнить эту работу с медиа-запросами. 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

Ответы [ 3 ]

3 голосов
/ 07 апреля 2011

Разве вы не можете использовать медиа-запросы , чтобы определить, какую таблицу стилей должен использовать браузер? Проверка отдельных пользовательских агентов кажется неправильным способом.

Редактировать: Я только что заметил код медиазапросов, который вы используете, и я заметил, что вы используете другой путь: css/style_mob.css при использовании javascript и ../css/style_mob.css. Это опечатка или причина не работает?

1 голос
/ 26 мая 2011

Я нашел обходной путь для проблемы, когда браузер Android не загружает мобильную таблицу стилей CSS, если вы не обновите страницу. Я называю это обходным, а не постоянным решением, потому что у меня есть один веб-сайт, где Android загружает мобильный CSS с первой попытки без проблем, используя: 

<link media="handheld, only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />

Но у меня есть другой веб-сайт, который использует тот же код выше для загрузки CSS, и браузер Android отказывается использовать его, если я не обновлю страницу. Я пытался изменить многие части HTML, чтобы соответствовать веб-сайт, который работает, но все безрезультатно. Итак, вот обходной код: 

<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />

«handheld» позволяет старым мобильным телефонам загружать mobile.css

«только экран и (max-width: 480px)» заставляет устройства Android загружать mobile.css с первой попытки, если они имеют ширину 480px или меньше.

«только экран и (max-device-width: 480px)» позволяет новым мобильным телефонам, iPhone и Android-устройствам загружать mobile.css, если они имеют ширину 480 пикселей или менее

Телефоны под управлением Windows Mobile 7 с IE не используют новые теги мультимедиа, поэтому вам нужно использовать этот код для загрузки их mobile.css: 

<!--[if IEMobile 7]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
<![endif]-->
1 голос
/ 07 апреля 2011

Браузеры телефонов кэшируют страницы так же, как браузеры настольных компьютеровПрежде чем тратить слишком много времени на изучение проблемы, убедитесь, что она не связана с кэшированием.

Очистите кэш на телефоне и снова перейдите по URL.Поскольку CSS обновляется корректно после обновления, я не удивлюсь, если это решит все проблемы.

Кроме того, вы упоминаете в своем вопросе, что лучше вообще иметь отдельный домен.Я говорю не обязательно.Есть много причин, по которым вы хотели бы иметь только 1 домен для каждой платформы.Запросы @media и адаптивный веб-дизайн могут помочь.Если вы интересуетесь этой темой, вам обязательно стоит ознакомиться с этой статьей из отдельного списка.Это может дать вам представление о возможностях.

РЕДАКТИРОВАТЬ:

Если это все еще не работает (что, похоже, не кажется), то, возможно,Вы должны проверить свой код пользовательского агента.Вместо того, чтобы загружать свой стиль style.css для всех, удалите это утверждение и сделайте его условным, чтобы браузер не был android:

Удалите строку css из вашего html: 

<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />

Изатем в вашем javascript: 

var normalCss = document.createElement('<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />');
var mobileCss = document.createElement('<link href="css/mobile.css" id="stylesheet" rel="stylesheet" type="text/css" />');

if(userAgent.search("Android")>=0){
    document.getElementsByTagName("head")[0].appendChild(mobileCss);
}
else {
    document.getElementsByTagName("head")[0].appendChild(normalCss);
}

Очистите кеш и протестируйте его.Загружает ли он css в первый раз или загружает страницу без стилей?

Если он не загружается в первый раз, это может означать, что код javascript не выполняется вовремя.Как ты это называешь?Это в главном разделе?Вы используете jQuery с $(document).ready или что-то подобное?

...