Автоматическое обнаружение мобильного браузера (через user-agent?) [закрытый]
Как я могу определить, если пользователь просматривает мой веб-сайт из мобильного веб-браузера, чтобы я мог автоматически обнаруживать и отображать соответствующую версию моего веб-сайта?
16 ответов
да, чтение заголовка User-Agent сделает трюк.
есть немного списки из там известных мобильных пользовательских агентов, так что вам не нужно начинать с нуля. Что я сделал, когда мне пришлось создать базу данных известных пользовательских агентов и хранить неизвестные, как они обнаружены для пересмотра, а затем вручную выяснить, что они такое. В некоторых случаях последнее может оказаться излишним.
Если вы хотите сделать это на уровне Apache, вы можете создать сценарий, который периодически генерирует набор правил перезаписи, проверяющих агент пользователя (или только один раз и забыть о новых агентах пользователя, или один раз в месяц, что подходит для вашего случая), как
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/
который будет двигаться, например, запросы на http://domain/index.HTML-код to http://domain/mobile/index.HTML-код
Если вам не нравится подход, когда скрипт периодически воссоздает файл htaccess, вы можете написать модуль, который проверяет пользователя Агент (я не нашел один уже сделанный, но нашел это особенно подходящим пример) и получить пользовательские агенты с некоторых сайтов, чтобы обновить их. Тогда вы можете усложнить подход столько, сколько хотите, но я думаю, что в вашем случае предыдущий подход будет в порядке.
есть сценарии с открытым исходным кодом на Обнаружение Мобильного Браузера которые делают это в 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 для некоторых хороших примеры
на АНДРОИД, IPHONE, IPAD, ЕЖЕВИКА, ЛАДОНЬ, CE WINDOWS, ЛАДОНЬ
<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>
файл браузера мобильного устройства-отличный способ обнаружить мобильные (и другие) broswers для 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 это очень просто, это просто свойство объекта navigator.
var useragent = navigator.userAgent;
вы можете проверить, если устройство, если iPhone или Blackberry в JS с чем-то вроде
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
Если isiphone верно вы получаете доступ к сайту с 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
}
да user-agent используется для обнаружения мобильных браузеров. Есть много бесплатных сценариев, доступных, чтобы проверить это. Вот один такой php код что поможет вам перенаправить мобильных пользователей на другой веб-сайт.
Я поставил эту демонстрацию со скриптами и примерами, включенными вместе:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
этот пример использует функции php для обнаружения агента пользователя и предлагает дополнительное преимущество, позволяя пользователям указывать предпочтения для версии сайта, которая обычно не будет по умолчанию на основе их браузера или типа устройства. Это делается с помощью cookies (поддерживается с помощью php на на стороне сервера, в отличие от яваскрипта.)
Не забудьте проверить ссылку для скачивания в статье для примеров.
Надеюсь, вам понравится!
MobileESP имеет PHP, Java, APS.NET (C#), Ruby и JavaScript крючки. он также имеет лицензию Apache 2, поэтому бесплатно для коммерческого использования. Ключевая вещь для меня-это только браузеры и платформы, а не размеры экрана и другие показатели, что делает его приятным маленьким.
есть совершенно новое решение с использованием Zend Framework. Начните со ссылки на Zend_HTTP_UserAgent: