Перенаправить мобильные устройства на альтернативную версию моего сайта

StackOverflow https://stackoverflow.com/questions/1118581

Вопрос

У нас есть альтернативная версия нашего сайта, готовая для мобильных устройств.Контент, который мы предоставляем, отличается, и он работает хорошо.

Как лучше всего определить, какую версию использовать.У нас нет списка всех мобильных устройств, поэтому использовать заголовок user-agent сложно, поскольку мы можем что-то пропустить.

Мы подумали об использовании ширины экрана устройства, но что произойдет, если мобильное устройство не поддерживает JavaScript?Как нам это унюхать?

Это было полезно?

Решение

Вы можете использовать базу данных описаний устройств (например, ВУРФЛ), который распознает клиентское устройство по заголовкам запросов.Затем вы можете запросить эту базу данных, чтобы решить, может ли устройство обрабатывать ваш сайт (например,поддерживают JavaScript или достаточно ли велик экран), прежде чем решить, следует ли перенаправить их на другой сайт.

Вы не упоминаете свою среду, но WURFL предоставляет API для Java и PHP, а возможно, и для других.Если API отсутствует, вы все равно можете использовать WURFL, но вам придется самостоятельно анализировать и обрабатывать данные XML.

Другие советы

media="handheld" не работает с современными смартфонами, такими как iphone, которые выдают себя за настольный браузер (использует тип мультимедиа screen).

http://detectmobilebrowser.com/Бесплатный и с открытым исходным кодом, имеет комплексную программу проверки мобильного пользовательского агента, доступную на многих языках - javascript, php, asp.net, Ruby и т. д.

Если вы хотите перенаправить на мобильный сайт с помощью JavaScript, я заметил, что у WURFL также есть решение, которое позволит вам выполнять обнаружение на стороне сервера с помощью JavaScript.

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

у вас останется объект JSON, который выглядит так:

{
     "complete_device_name":"Apple iPhone 6",
     "is_mobile":true,
     "form_factor":"Smartphone"
}

Затем вы можете использовать это:

if (WURFL.is_mobile === true) {
    window.location.replace("http://stackoverflow.com");
}

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

ИМО, лучше всего указать пользовательский агент: здесь представляет собой список пользовательских агентов, который кажется довольно полным (к сожалению, на французском языке).

Просто вставьте это в заголовок:

<script type="text/javascript">
 <!--
  if (screen.width <= 700) {
  window.location = "http://www.mobile-site.com";
  }
 //-->
</script>

Экраны почти всех компьютеров превышают порог в 700 пикселей, но это значение можно изменить.Не существует телефона или планшета с разрешением выше 700 пикселей (по крайней мере, я не знаю ни одного), поэтому все мобильные устройства будут перенаправляться на ваш мобильный сайт.

Альтернатива ВУРФЛ является Мобильный детектор, класс PHP для обнаружения:

  • Таблетка
  • мобильный
  • iOS
  • Андроид
  • Браузеры
  • И многое другое

Так что в случае ВУРФЛ не делает то, что вам нужно, вы всегда можете это проверить.

Согласен со Скаффманом, другая база данных устройств ДевайсАтлас.Хотя за это вам придется заплатить.

Если устройство не поддерживает JS, лучше рассмотреть серверное решение и ВУРФЛ API может помочь в этом направлении.

Иногда мы хотим избежать проблем с таким подходом (например, обратный прокси-сервер кэширует страницы и не допускает перенаправления на мобильную версию) или нам нужно быстрое решение, зная, что в настоящее время почти все последние устройства поддерживают JS.

По этой причине я написал JS-скрипт под названием «redirection_mobile.js», который определяет пользовательский агент браузера и перенаправляет на мобильную версию вашего сайта, если вы заходите на него с мобильного устройства.

В некоторых случаях вы хотите перенаправить с мобильного устройства на версию для настольного компьютера (например, с помощью ссылки «Перейти на основной сайт»), скрипт обработает это, и как только вы завершите сеанс, вы снова получите доступ к мобильной версии. .

Вы можете найти исходный код на github здесь. http://github.com/sebarmeli/JS-Redirection-Mobile-Site Более подробную информацию вы можете прочитать в одной из моих статей здесь:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

Простой:

<link rel="alternate" media="handheld" href="WEBSITE HERE">

поместите это в заголовок.

вот рабочее решение

RewriteEngine On
RewriteBase /

#http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
# Check if mobile=1 is set and set cookie 'mobile' equal to 1
RewriteCond %{QUERY_STRING} (^|&)mobile=1(&|$)
RewriteRule ^ - [CO=mobile:1:%{HTTP_HOST}]

# Check if mobile=0 is set and set cookie 'mobile' equal to 0
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [CO=mobile:0:%{HTTP_HOST}]

# cookie can't be set and read in the same request so check
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [S=1]

# Check if this looks like a mobile device
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC,OR]
RewriteCond %{HTTP:Profile}       !^$
RewriteCond %{QUERY_STRING} !^mobile=0(?:&|$)
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie}        !\mobile=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.yourdomain.com%{REQUEST_URI} [R,L]

# Go back to full site
RewriteCond %{HTTP_HOST} ^m\.
RewriteCond %{QUERY_STRING} (?:^|&)mobile=0(?:&|$)
RewriteRule ^ http://yourdomain.com%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [NC,L]

RewriteRule ^.*$ index.php [NC,L]
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top