Автоопределение мобильного браузера (через user-agent?) [Закрыто]
https://stackoverflow.com/questions/1005153
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Как я могу определить, просматривает ли пользователь мой веб-сайт через мобильный веб-браузер, чтобы я мог автоматически определить и отобразить соответствующую версию моего веб-сайта?
Решение
Да, чтение заголовка User-Agent поможет.
Есть несколько списков out из известных мобильных пользовательских агентов, поэтому вам не нужно начинать с нуля. Когда я должен был это сделать, я создал базу данных известных пользовательских агентов и сохранил неизвестные по мере их обнаружения для проверки, а затем вручную выяснил, кто они. Эта последняя вещь может быть излишней в некоторых случаях.
Если вы хотите сделать это на уровне Apache, вы можете создать скрипт, который периодически генерирует набор правил перезаписи, проверяя пользовательский агент (или просто один раз и забывая о новых пользовательских агентах, или один раз в месяц, в зависимости от того, что подходит вашему случаю). ), как
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
, который, например, переместит запросы в http: //domain/index.html в http: //domain/mobile/index.html
Если вам не нравится подход, при котором скрипт периодически воссоздает файл htaccess, вы можете написать модуль, который проверяет пользовательский агент (я не нашел уже созданного, но нашел это особенно подходящим example ) и получите пользовательские агенты с некоторых сайтов для их обновления. Тогда вы можете усложнить подход настолько, насколько захотите, но я думаю, что в вашем случае предыдущий подход будет нормальным.
Другие советы
На Обнаружении мобильного браузера есть скрипты с открытым исходным кодом, которые делают это в Apache, ASP, ColdFusion, JavaScript и PHP.
Просто мысль, а что, если вы решили эту проблему с противоположной стороны? Вместо того, чтобы определять, какие браузеры являются мобильными, почему бы не определить, какие браузеры не являются? Затем код вашего сайта по умолчанию для мобильной версии и перенаправить на стандартную версию. При взгляде на мобильный браузер есть две основные возможности. Либо у него есть поддержка javascript, либо нет. Так что, если браузер не имеет поддержки javascript, он по умолчанию будет мобильной версией. Если у него есть поддержка JavaScript, проверьте размер экрана. Все, что ниже определенного размера, также может быть мобильным браузером. Все, что больше, будет перенаправлено на ваш стандартный макет. Затем все, что вам нужно сделать, это определить, является ли пользователь с отключенным JavaScript мобильным или нет.
Согласно W3C, количество пользователей с отключенным JavaScript было около 5%, и большинство пользователей отключили его, что означает, что они действительно знают, что делают с браузером. Они большая часть вашей аудитории? Если нет, то не беспокойтесь о них. Если так, каков худший случай? Эти пользователи просматривают мобильную версию вашего сайта, и это хорошо.
Вот как я это делаю в JavaScript:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
См. пример в 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 для некоторых хороших примеров
для Android, IPhone, IPAD, BLACKBERRY, PALM, WINDOWS CE, PALM
<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/
Мобильные клиенты можно обнаружить просто через 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 , и вы можете прочитать подробности в одной из моих статей здесь:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
Этот пример работает в asp.net
Вы не сказали, какой язык вы используете. Если это 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
}
Да, пользовательский агент используется для обнаружения мобильных браузеров. Есть много бесплатных скриптов, доступных для проверки этого. Вот один из таких php-код , который поможет перенаправить мобильных пользователей на другой веб-сайт.
Я поместил это демо со скриптами и примерами, включенными вместе:
http: // www. mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
В этом примере используются функции php для обнаружения пользовательских агентов, и он дает дополнительное преимущество, позволяя пользователям указывать предпочтения для версии сайта, которая обычно не будет использоваться по умолчанию в зависимости от браузера или типа устройства. Это делается с помощью файлов cookie (поддерживается с помощью php на стороне сервера, а не javascript.)
Не забудьте проверить ссылку на скачивание в статье для примеров.
Надеюсь, вам понравится!
MobileESP имеет хуки PHP, Java, APS.NET (C #), Ruby и JavaScript. у него также есть лицензия Apache 2, поэтому она бесплатна для коммерческого использования. Ключевым для меня является то, что он определяет только браузеры и платформы, а не размеры экрана и другие показатели, что делает его небольшим.
Существует совершенно новое решение с использованием Zend Framework. Начните со ссылки на Zend_HTTP_UserAgent:
