Автоопределение мобильного браузера (через user-agent?)
Как я могу определить, просматривает ли пользователь мой веб-сайт через мобильный веб-браузер, чтобы я мог автоматически определить и отобразить соответствующую версию моего веб-сайта?
16 ответов
Да, чтение заголовка User-Agent поможет.
Есть несколько списков известных мобильных пользовательских агентов, поэтому вам не нужно начинать с нуля. Когда я должен был это сделать, я создал базу данных известных пользовательских агентов и сохранил неизвестные по мере их обнаружения для ревизии, а затем вручную выяснил, кто они. Эта последняя вещь может быть излишней в некоторых случаях.
Если вы хотите сделать это на уровне Apache, вы можете создать скрипт, который периодически генерирует набор правил перезаписи, проверяя пользовательский агент (или просто один раз и забывая о новых пользовательских агентах, или один раз в месяц, в зависимости от того, что подходит вашему случаю), например
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
который, например, переместит запросы на http://domain/index.html на http://domain/mobile/index.html
Если вам не нравится, когда скрипт периодически воссоздает файл htaccess, вы можете написать модуль, который проверяет пользовательский агент (я не нашел уже созданного, но нашел этот особенно подходящий пример) и получить пользовательские агенты. с некоторых сайтов, чтобы обновить их. Тогда вы можете усложнить подход столько, сколько хотите, но я думаю, что в вашем случае предыдущий подход был бы нормальным.
В http://detectmobilebrowser.com/ есть скрипты с открытым исходным кодом, которые делают это на Apache, ASP, ColdFusion, JavaScript и PHP.
Просто мысль, но что, если вы решили эту проблему с противоположной стороны? Вместо того, чтобы определять, какие браузеры являются мобильными, почему бы не определить, какие браузеры не являются? Затем код вашего сайта по умолчанию для мобильной версии и перенаправить на стандартную версию. При взгляде на мобильный браузер есть две основные возможности. Либо у него есть поддержка JavaScript, либо нет. Таким образом, если браузер не поддерживает Javascript, он по умолчанию будет мобильной версией. Если у него есть поддержка JavaScript, проверьте размер экрана. Все, что ниже определенного размера, также может быть мобильным браузером. Все, что больше, будет перенаправлено на ваш стандартный макет. Тогда все, что вам нужно сделать, это определить, является ли пользователь с отключенным JavaScript мобильным или нет.
Согласно W3C, количество пользователей с отключенным JavaScript было около 5%, и большинство пользователей отключили его, что означает, что они действительно знают, что делают с браузером. Они большая часть вашей аудитории? Если нет, то не беспокойтесь о них. Если так, каков худший сценарий? Эти пользователи просматривают мобильную версию вашего сайта, и это хорошо.
Вот как я делаю это в JavaScript:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
См. Пример на http://www.tablemaker.net/test/mobile.html, где он утраивает размер шрифта на мобильных телефонах.
Мой любимый механизм обнаружения мобильных браузеров - WURFL. Он часто обновляется и работает со всеми основными платформами программирования / языка.
Рассматривали ли вы использование медиа-запросов css3? В большинстве случаев вы можете применить некоторые стили CSS специально для целевого устройства, не создавая отдельную мобильную версию сайта.
@media screen and (max-width:1025px) {
#content {
width: 100%;
}
}
Вы можете установить ширину по своему усмотрению, но 1025 поймает альбомную ориентацию iPad.
Вы также захотите добавить следующий метатег к своей голове:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Проверьте эту статью на HTML5 Rocks для некоторых хороших примеров
Для андроида, айфона, айпада, черники, пальмы, окна CE, пальмы
<script language="javascript"> <!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
alert("MOBILE DEVICE DETECTED");
document.write("<b>------------------------------------------<br>")
document.write("<b>" + navigator.userAgent + "<br>")
document.write("<b>------------------------------------------<br>")
var userAgent = navigator.userAgent.toLowerCase();
if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
document.write("<b> ANDROID MOBILE <br>")
else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
document.write("<b> ANDROID TABLET <br>")
else if ((userAgent.search("blackberry") > -1))
document.write("<b> BLACKBERRY DEVICE <br>")
else if ((userAgent.search("iphone") > -1))
document.write("<b> IPHONE DEVICE <br>")
else if ((userAgent.search("ipod") > -1))
document.write("<b> IPOD DEVICE <br>")
else if ((userAgent.search("ipad") > -1))
document.write("<b> IPAD DEVICE <br>")
else
document.write("<b> UNKNOWN DEVICE <br>")
}
else
alert("NO MOBILE DEVICE DETECTED"); //--> </script>
Файл браузера для мобильных устройств - отличный способ обнаружить мобильные (и другие) рекламные ролики для проектов ASP.NET: http://mdbf.codeplex.com/
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
Этот пример работает в asp.net
Вы можете обнаружить мобильных клиентов просто через navigator.userAgent и загрузите альтернативные сценарии на основе обнаруженного типа клиента как:
$(document).ready(function(e) {
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
//write code for your mobile clients here.
var jsScript = document.createElement("script");
jsScript.setAttribute("type", "text/javascript");
jsScript.setAttribute("src", "js/alternate_js_file.js");
document.getElementsByTagName("head")[0].appendChild(jsScript );
var cssScript = document.createElement("link");
cssScript.setAttribute("rel", "stylesheet");
cssScript.setAttribute("type", "text/css");
cssScript.setAttribute("href", "css/alternate_css_file.css");
document.getElementsByTagName("head")[0].appendChild(cssScript);
}
else{
// write code for your desktop clients here
}
});
Вы можете проверить строку User-Agent. В JavaScript это действительно просто, это просто свойство объекта навигатора.
var useragent = navigator.userAgent;
Вы можете проверить, если устройство iPhone или Blackberry в JS с чем-то вроде
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
если isIphone имеет значение true, вы заходите на сайт с Iphone, если isBlackBerry вы заходите на сайт с Blackberry.
Вы можете использовать плагин UserAgent Switcher для Firefox, чтобы проверить это.
Если вы также заинтересованы, возможно, стоит проверить мой скрипт "redirection_mobile.js", размещенный на github здесь https://github.com/sebarmeli/JS-Redirection-Mobile-Site, и вы можете прочитать более подробную информацию в одном из моя статья здесь:
Вы не сказали, какой язык вы используете. Если это Perl, то это тривиально:
use CGI::Info;
my $info = CGI::Info->new();
if($info->is_mobile()) {
# Add mobile stuff
}
unless($info->is_mobile()) {
# Don't do some things on a mobile
}
MobileESP имеет хуки PHP, Java, APS.NET (C#), Ruby и JavaScript. у него также есть лицензия Apache 2, поэтому она бесплатна для коммерческого использования. Ключевым для меня является то, что он определяет только браузеры и платформы, а не размеры экрана и другие показатели, что делает его небольшим.
Я поместил это демо со сценариями и примерами, включенными вместе:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
В этом примере используются функции php для обнаружения пользовательского агента и предлагается дополнительное преимущество, позволяющее пользователям указывать предпочтения для версии сайта, которая обычно не будет использоваться по умолчанию в зависимости от их браузера или типа устройства. Это делается с помощью файлов cookie (поддерживается с помощью php на стороне сервера, а не javascript).
Не забудьте проверить ссылку на скачивание в статье для примеров.
Надеюсь, ты повеселишься!
Да, пользовательский агент используется для обнаружения мобильных браузеров. Есть много бесплатных скриптов, доступных для проверки этого. Вот один из таких php-кодов, который поможет вам перенаправить мобильных пользователей на другой сайт.
Есть новое решение, использующее Zend Framework. Начните со ссылки на Zend_HTTP_UserAgent: