Как я могу определить, просматривает ли пользователь мой веб-сайт из мобильного веб-браузера, чтобы затем я мог автоматически обнаружить и отобразить соответствующую версию моего веб-сайта?
Автоматическое обнаружение мобильного браузера (через user-agent?)
Ответ 1
Да, чтение заголовка User-Agent сделает трюк.
Есть некоторые списки из известного мобильного пользовательских агентов, поэтому вам не нужно начинать с нуля. Что я сделал, когда мне приходилось создавать базу данных известных пользовательских агентов и хранить неизвестные, поскольку они были обнаружены для проверки, а затем вручную выяснить, что они собой представляют. В некоторых случаях это может быть излишним.
Если вы хотите сделать это на уровне Apache, вы можете создать script, который периодически генерирует набор правил перезаписи, проверяющих агент пользователя (или только один раз, и забывает о новых агентах пользователя или один раз в месяц, ваш случай), например
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
который перемещает, например, запросы http://domain/index.html в <а3 >
Если вам не нравится подход, когда script периодически воссоздает файл htaccess, вы можете написать модуль, который проверяет User Agent (я не нашел его уже сделанным, но нашел это особенно подходящим пример) и получить агенты пользователя с некоторых сайтов для их обновления. Тогда вы можете усложнить подход столько, сколько хотите, но я думаю, что в вашем случае предыдущий подход будет в порядке.
Ответ 2
Ответ 3
Просто мысль, но что, если вы справились с этой проблемой в противоположном направлении? Вместо того, чтобы определять, какие браузеры являются мобильными, почему бы не определить, какие браузеры нет? Затем закодируйте свой сайт по умолчанию для мобильной версии и перенаправляйте на стандартную версию. При взгляде на мобильный браузер есть две основные возможности. Либо он поддерживает javascript, либо нет. Поэтому, если браузер не поддерживает javascript, он будет по умолчанию для мобильной версии. Если у него есть поддержка JavaScript, проверьте размер экрана. Все, что ниже определенного размера, вероятно, также будет мобильным браузером. Все большее будет перенаправлено на ваш стандартный макет. Тогда все, что вам нужно сделать, это определить, является ли пользователь с отключенным JavaScript мобильным или нет.
Согласно W3C, число пользователей с отключенным JavaScript было около 5%, и большинство пользователей отключили его, что означает, что они действительно знают, что они делают с браузером. Являются ли они значительной частью вашей аудитории? Если нет, тогда не беспокойтесь о них. Если да, то каков худший сценарий? У вас есть пользователи, просматривающие мобильную версию вашего сайта, и это хорошо.
Ответ 4
Вот как я это делаю в JavaScript:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
См. пример в www.tablemaker.net/test/mobile.html, где он изменяет размер шрифта на мобильных телефонах.
Ответ 5
Мой любимый механизм обнаружения мобильных браузеров WURFL. Он часто обновляется, и он работает со всеми основными платформами программирования и языка.
Ответ 6
Рассматривали ли вы использование медиа-запросов 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 для некоторых хороших примеров
Ответ 7
для 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>
Ответ 8
Файл обозревателя мобильных устройств - отличный способ обнаружить мобильные (и другие) броузеры для проектов ASP.NET: http://mdbf.codeplex.com/ p >
Ответ 9
Вы можете обнаруживать мобильные клиенты просто через 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
}
});
Ответ 10
Вы можете проверить строку User-Agent. В JavaScript это очень просто, это просто свойство объекта навигатора.
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.
Если вам также интересно, может быть стоит проверить мой script "redirection_mobile.js" , размещенный на github здесь https://github.com/sebarmeli/JS -Redirection-Mobile-Site, и вы можете прочитать более подробную информацию в одной из моих статей здесь:
Ответ 11
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
Этот пример работает в asp.net
Ответ 12
Вы не сказали, на каком языке вы используете. Если это 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
}
Ответ 13
Да, пользовательский агент используется для обнаружения мобильных браузеров. Есть много бесплатных скриптов, доступных для проверки этого. Вот один из таких php code, который поможет вам перенаправить мобильных пользователей на другой сайт.
Ответ 14
Я разместил эту демонстрацию со сценариями и примерами, включенными вместе:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
В этом примере используются функции php для обнаружения пользовательского агента и дает дополнительное преимущество, позволяющее пользователям указывать предпочтение для версии сайта, которая обычно не будет использоваться по умолчанию на основе их браузера или типа устройства. Это делается с помощью куки файлов (поддерживается с использованием php на стороне сервера, а не javascript).
Обязательно ознакомьтесь с ссылкой для загрузки в статье для примеров.
Надеюсь, вам понравится!
Ответ 15
MobileESP имеет привязки PHP, Java, APS.NET(С#), Ruby и JavaScript. у него также есть лицензия Apache 2, поэтому она бесплатна для коммерческого использования. Главное для меня - это только определение браузеров и платформ, а не размеров экрана и других показателей, что делает его приятным.
Ответ 16
Там есть новое решение, использующее Zend Framework. Начните с ссылки на Zend_HTTP_UserAgent: