Я создаю приложение для телефонных разговоров для различных мобильных платформ, и мне было интересно, какое настоящее решение лучше всего подходит для обнаружения браузера / мобильного телефона?
Должен ли я идти с обнаружением сервера или клиента или я могу использовать решение css через ширину экрана типов медиа?
Есть несколько доступных решений, но я буду называть только open-source, по крайней мере, решения, которые в основном используются с jQuery / jQuery Mobile. Также следует предупредить, что эта тема может начать войну. С одной стороны у нас есть сторонники обнаружения на стороне сервера с базами данных, поддерживаемыми сообществом, а с другой стороны у нас есть сторонники клиентской стороны с их обнюхиванием в браузере.
WURFL –
Созданная в 2002 году WURFL (Wireless Universal Resource FiLe), является популярной инфраструктурой с открытым исходным кодом для решения проблемы фрагментации устройства для мобильных веб-разработчиков и других заинтересованных сторон в мобильной экосистеме. WURFL был и остается де-факто стандартным репозитором описания устройств, принятым разработчиками мобильных устройств. WURFL является открытым исходным кодом (AGPL v3) и товарным знаком ScientiaMobile.
Хорошо :
Очень подробное обнаружение, вы, вероятно, получите больше данных, тогда это действительно необходимо.
Хорошая поддержка платформы, api доступны для Java, PHP и .Net.
Плохо :
Не всегда актуальная, сильная зависимость от сообщества
В случае iPhone нет возможности узнать версию iOS, поэтому запросы типа мультимедиа обнаруживают соотношение пикселей.
Плата только за некоммерческое использование, более старая версия по-прежнему бесплатна для коммерческого использования, но они могут использовать только обновленную базу данных до изменений WURFL EULA.
Пример PHP:
<?php // Include the configuration file include_once './inc/wurfl_config_standard.php'; $wurflInfo = $wurflManager->getWURFLInfo(); if (isset($_GET['ua']) && trim($_GET['ua'])) { $ua = $_GET['ua']; $requestingDevice = $wurflManager->getDeviceForUserAgent($_GET['ua']); } else { $ua = $_SERVER['HTTP_USER_AGENT']; // This line detects the visiting device by looking at its HTTP Request ($_SERVER) $requestingDevice = $wurflManager->getDeviceForHttpRequest($_SERVER); } ?> <html> <head> <title>WURFL PHP API Example</title> </head> <body> <h3>WURFL XML INFO</h3> <ul> <li><h4>VERSION: <?php echo $wurflInfo->version; ?> </h4></li> </ul> <div id="content"> User Agent: <b> <?php echo htmlspecialchars($ua); ?> </b> <ul> <li>ID: <?php echo $requestingDevice->id; ?> </li> <li>Brand Name: <?php echo $requestingDevice->getCapability('brand_name'); ?> </li> <li>Model Name: <?php echo $requestingDevice->getCapability('model_name'); ?> </li> <li>Marketing Name: <?php echo $requestingDevice->getCapability('marketing_name'); ?> </li> <li>Preferred Markup: <?php echo $requestingDevice->getCapability('preferred_markup'); ?> </li> <li>Resolution Width: <?php echo $requestingDevice->getCapability('resolution_width'); ?> </li> <li>Resolution Height: <?php echo $requestingDevice->getCapability('resolution_height'); ?> </li> </ul> <p><b>Query WURFL by providing the user agent:</b></p> <form method="get" action="index.php"> <div>User Agent: <input type="text" name="ua" size="100" value="<?php echo isset($_GET['ua'])? htmlspecialchars($_GET['ua']): ''; ?>" /> <input type="submit" /></div> </form> </div> </body> </html> Если вы хотите настроить этот код, измените параметры конфигурации внутри файла wurfl_config_standard.php .
Modernizr – Сервер –
Modernizr – отличный способ узнать о возможностях браузера вашего пользователя. Тем не менее, вы можете получить доступ только к своему API в самом браузере, а это значит, что вы не можете легко узнать о возможностях браузера в своей логике сервера. Библиотека modernizr-сервера – это способ принести данные браузера Modernizr в среду сценариев сервера.
Хорошо :
Как и WURFL, очень подробное обнаружение, но мы должны принять во внимание, что он построен с другой целью WURFL.
Плохо :
Поддерживается только PHP, но иногда этого будет достаточно.
Пример :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Modernizr Server Example</title> </head> <body> <?php include('modernizr-server.php'); print 'The server knows:'; foreach($modernizr as $feature=>$value) { print "<br/> $feature: "; print_r($value); } ?> </body> </html>в<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Modernizr Server Example</title> </head> <body> <?php include('modernizr-server.php'); print 'The server knows:'; foreach($modernizr as $feature=>$value) { print "<br/> $feature: "; print_r($value); } ?> </body> </html>
Модернизатор –
Преимущество прохладных новых веб-технологий – отличная забава, пока вам не придется поддерживать браузеры, которые отстают. Modernizr упрощает запись условного JavaScript и CSS для обработки каждой ситуации, независимо от того, поддерживает ли браузер какую-либо функцию или нет. Он идеально подходит для быстрого прогрессирования.
Хорошо :
Только клиентская сторона, компонент на стороне сервера не существует
Быстрый, но все еще большой для javascript framework с 12kb. Из-за своей модульности он может стать меньше, в зависимости от ваших потребностей.
Плохо :
Может делать только так много, меньше информации, чем обнаружение на стороне сервера.
Сам Modernizr – отличный способ узнать о возможностях браузера вашего пользователя. Тем не менее, вы можете получить доступ только к своему API в самом браузере, а это значит, что вы не можете легко узнать о возможностях браузера в своей логике сервера.
Пример :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Modernizr Example</title> <script src="modernizr.min.js"></script> </head> <body> <script> if (Modernizr.canvas) { // supported } else { // no native canvas support available :( } </script> </body> </html>
Обход браузера на основе JavaScript
Можно утверждать, что это может быть (академически) наихудшим способом обнаружения мобильных устройств, но у него есть свои достоинства.
Хорошо :
просто
Плохо :
С чего начать
Пример :
<script type="text/javascript"> var agent = navigator.userAgent; var isWebkit = (agent.indexOf("AppleWebKit") > 0); var isIPad = (agent.indexOf("iPad") > 0); var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0); var isAndroid = (agent.indexOf("Android") > 0); var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0); var isWebOS = (agent.indexOf("webOS") > 0); var isWindowsMobile = (agent.indexOf("IEMobile") > 0); var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000)); var isUnknownMobile = (isWebkit && isSmallScreen); var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile); var isTablet = (isIPad || (isMobile && !isSmallScreen)); if ( isMobile && isSmallScreen && document.cookie.indexOf( "mobileFullSiteClicked=") < 0 ) mobileRedirect(); </script>
Это может быть не лучшее решение, но я использую эту функцию для моего личного использования в javascript.
Кстати, @Gajotres благодарит за глубокую и полезную информацию.
function mobilMi() { if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)|| navigator.userAgent.match(/iPad/i) ){ return 1; } else return 0; }
Я код что-то вроде этого, чтобы получить тип устройства os … $ test будет строка пользовательского агента
if (preg_match("/linux/i", $test) && preg_match("/android/i", $test)) { $device_type = 'Android'; } else if (preg_match("/windows phone/i", $test)){ $device_type = '<font size="6">Windows Mobile</font>'; } else if (preg_match("/windows nt/i", $test)){ $device_type = 'Windows'; } else if (preg_match("/linux/i", $test)){ $device_type = 'Linux'; } else if (preg_match("/macintosh/i", $test)){ $device_type = 'Macintosh'; } else if (preg_match("/iphone/i", $test)){ $device_type = 'iPhone'; } else if (preg_match("/ipad/i", $test)){ $device_type = 'iPad'; } else if (preg_match("/symbian/i", $test)){ $device_type = 'Symbian'; } else if (preg_match("/blackberry/i", $test)){ $device_type = 'Blackberry'; } else $device_type = 'None';
Я думаю, вам нужно знать шаблон и получить ключевое слово. Использование WURFL иногда не получает того, что вы хотите.