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

Question

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

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

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

Answer 1

Вы можете использовать базу данных описания устройств (например, WURFL ), которая распознает клиентское устройство по заголовкам запросов. Затем вы можете запросить эту базу данных, чтобы решить, может ли устройство обрабатывать ваш сайт (например, поддерживать javascript или достаточно большой экран), прежде чем решить, следует ли перенаправить их на другой сайт.

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

Answer 2

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

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

Answer 3

Если вы хотите перенаправить на мобильный сайт с помощью 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");
}

Answer 4

Альтернативой WURFL является Mobile Detect , класс PHP для обнаружения:

• Tablet
• Мобильный телефон
• 1012 * Иос *
• Android
• Браузеры
• и многое другое

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

Answer 5

Просто поместите это в заголовок:

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

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

Answer 6

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

IMO, лучше всего перечислить пользовательский агент: здесь - это список User-Agent, который кажется довольно полным (к сожалению, на французском).

Answer 7

вот рабочий раствор

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]

Answer 8

Если устройство не поддерживает JS, лучше рассмотреть решение на стороне сервера, и WURFL 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/

Answer 9

Simple:

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

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

Answer 10

Соглашаясь со Скаффманом, другая база данных устройства - DeviceAtlas . Вы должны заплатить за это, хотя.