Определите, поддерживает ли мобильный браузер CSS и javascript

Question

Я разрабатываю мобильный сайт, и в основном хочу две версии. Один из них будет интенсивно работать в javascript и css, а другой - для старых телефонов. Очень простой xhtml.

Любой способ автоматического перенаправления в зависимости от возможностей браузера?

Answer 1

IF построен правильно, то тот же сайт XHTML должен поддерживать обе версии.
То есть, я вижу несколько возможностей:

1. Проверьте агент пользователя, чтобы определить, типа браузера
2. Используйте NoScript тег на интенсивную версию JS со ссылкой на простом сайт
3. Использование JS перенаправить к интенсивной версии JS на простой XHTML сайт (не очень хорошо с точки зрения SEO)

Answer 2

Скачать короткий HTML-файл, который имеет мета-обновления установлен на 1 секунду, и он также будет иметь JavaScript в Это. Если javascript начинается, он немедленно изменяет URL-адрес для мета-обновления.

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

В идеале вам нужно просто загрузить версию non-js, но в ней есть теги скриптов, поэтому она также загрузит хотя бы один файл javascript и будет использовать ненавязчивый javascript для изменения исходной страницы.

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

Вы также можете проверить, какая версия javascript проверяется на наличие определенных объектов (например, <canvas>) и основывается на этом изменении правильного URL-адреса.

Answer 3

Взгляните на UAProf, «спецификация, касающаяся возможностей захвата и информации о предпочтениях для беспроводных устройств. Эта информация может использоваться контент-провайдерами для создания контента в соответствующем формате для конкретного устройства». (цитата из страницы Википедии.)

Также интересен WURFL, файл конфигурации XML с открытым исходным кодом, который содержит информацию о возможностях и функциях многих мобильных устройств ». Вы также можете прочитать следующее: WURLF and UAProf.

DeviceAtlas - популярное коммерческое решение, которое, как утверждается, является более полным, чем WURFL (оно включает в себя все данные WURFL и т. Д.). См.: How do you compare DeviceAtlas to WURFL and UAProf.

Answer 4

Возможно, вам не нужны две отдельные версии вашего сайта. Лучше всего постепенно увеличивать ваш простой опыт, используя feature detection, чтобы определить, когда делать фантазии. При этом правила CSS часто деградируют изящно самостоятельно, если браузер их не поддерживает.

.background-gradient { 
    background-color: #333; 
    background-image: url(some_image.png); /*older browsers simply get the bg image*/ 
    background-image: -webkit-linear-gradient(top, #333333, #eeeeee); 
    background-image: -moz-linear-gradient(top, #333333, #eeeeee); 
    background-image: -ms-linear-gradient(top, #333333, #eeeeee); 
    background-image: -o-linear-gradient(top, #333333, #eeeeee); 
    background-image: linear-gradient(top, #333333, #eeeeee); 
}