Мобильное обнаружение и поддержка старых устройств - PullRequest
Новая
       28

Мобильное обнаружение и поддержка старых устройств

2 голосов
/ 08 декабря 2011

Как определить, когда пользователь заходит на сайт со старым телефоном (не со смартфоном или айфоном). Я использую jQuery-Mobile с Joomla 1.7.

Я использую этот скрипт: 

<script type="text/javascript">// <![CDATA[  
var mobile = (/acer|alcatel|audiovox|avantgo|blazer|cdm|digital paths|elaine|epoc|handspring|iemobile|kyocera|lg|midp|mmp|mobile|motorola|nec|o2|openwave|opera mini|operamini|opwv|palm|panasonic|pda|phone|playstation portable|pocket|psp|qci|sagem|sanyo|sec|sendo|sharp|smartphone|symbian|telit|tsm|up-browser|up.browser|up.link|vodafone|wap|windows ce|xiino|ericsson|sonyericsson|iphone|ipod|android|blackberry|samsung|nokia|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
if (mobile) {  
    document.location = "http://mysite,com/mobile";  
}  
// ]]></script>

Сайт хорошо работает с HTC, iPhone, Nokia и так далее. Мой друг тестировал с некоторым Ericsson (не знаю модель), но сайт не будет работать. Показывает только ПК-сайт, а не мобильный.

Ответы [ 3 ]

2 голосов
/ 08 декабря 2011

Вот 3 способа обнаружения мобильного телефона ...

  1. Браузер, поддерживаемый сообществом Сниффинг через проект WURFL
  2. Пользовательский браузерФырканье (то, что вы делаете сейчас, довольно распространенное, хотя и не считается лучшей практикой)
  3. Обнаружение с помощью поддержки функций.

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

Вариант 2 : Люди, не использующие смартфоны, знают, что просмотр веб-страниц на них - отстой.Поэтому они реже используют их для Интернета.Как процент трафика, процент людей, которых вы пропустите при использовании обнаружения в JavaScript, вероятно, не стоит того, чтобы о нем говорить.Для сайтов, которые я видел, это было менее 2% для BlackBerry 5 или старше и менее 1% для всего остального, кроме Android, iOS или BlackBerry 6+.Я поддерживал этот метод обнаружения раньше, и вот как я это сделал.Обратите внимание на допуск для любой опции, основанной на webkit, при условии, что экран маленький (isUnknownMobile)Это попытка проверки в будущем до тех пор, пока такая платформа не сможет набрать достаточную тягу для вызова. 

<script>
    var agent = navigator.userAgent; 
    var isWebkit = (agent.indexOf("AppleWebKit") > 0);
    var isIPad = (agent.indexOf("iPad") > 0);
    var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);
    var isAndroid = (agent.indexOf("Android")  > 0);
    var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);
    var isWebOS = (agent.indexOf("webOS") > 0);
    var isWindowsMobile = (agent.indexOf("Windows Phone OS") > 0);
    var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));
    var isUnknownMobile = (isWebkit && isSmallScreen);
    var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);
    var isTablet = (isIPad || (isMobile && !isSmallScreen));
    function mobileRedirect(mobileView){location.replace((mobileView)?mobileView:"/mobile/index.jsp");}
</script>

Опция 3 : Обнаружение функции, вероятно, является гораздо более надежным способом тестирования в будущемесли клиент мобильный.Попробуйте использовать Modernizr Project , чтобы узнать, какие функции поддерживаются.Например, если устройство имеет небольшой экран и поддерживает холст, или если оно имеет сенсорный интерфейс, они, вероятно, являются мобильными.Опять же, это обнаружение на основе интерфейса и опирается на JavaScript.

Если вы действительно хотите перенаправить ВСЕХ, кто является мобильным, проект WURFL - ваш лучший выбор.

0 голосов
/ 08 декабря 2011

Поддерживает ли телефон JavaScript?Если нет, вы можете использовать этот обходной путь (если он не влияет на UX вашего сайта):

  1. Создайте div-контейнер, который перекрывает весь сайтописание (например, «Этот сайт предоставляет мобильную версию») и ссылку
  2. Скрыть Div с помощью JavaScript, если это не мобильное устройство или поддерживаемое
0 голосов
/ 08 декабря 2011

Это то, что я использую в своем коде для проверки мобильных телефонов 

  function checkScreen()
  {
    if (screen.width <= 1000 && screen.height <= 1000)
      window.location.replace("MobileURL");
    else
      window.location.replace("URL");
  }

В основном вы проверяете разрешение экрана клиента. Если он действительно низкий, вы просто перенаправляете на мобильный. Вы можете изменить параметры на меньший экран, если хотите.

...