Как осуществить определение мобильных устройств?
В наше время нам доступно большое множество различных мобильных браузеров и поэтому не будет лишним оптимизировать сайт и для мобилок. Но чтобы это сделать нам следует определить каким устройством пользуется человек открывший сайт.
Существует несколько методов для этого которые мы и рассмотрим:
1. PHP User Agent
При открытии браузером вашей страницы, он посылает данные о себе, включая post data, реферера, а также user agent. В данный момент можно проверить совместимость user agent по списку известных мобильных user agent, тем саммым перенаправить данного пользователя на другую, совместимую с его устройством страницу, или присвоить тот или иной CSS.
Сам код очень прост, пример его:
<?php
//Список известных мобильных агентов
$moiles = array(«iPhone»,»iPod»);
foreach( $moiles as $moile ) {
if( preg_match( «#».$moile.»#i», $_SERVER[‘HTTP_USER_AGENT’] ) ) {
//Хорошо, это мобильный браузер, давайте перенаправить его!
header(‘Location:https://moile.site.ru/’);
exit();
}
}
?>
Данный код очень удобный, так как можно отключить текст, чтобы пользователи, могли видеть и полную версию сайта. Переход в данную версию сайта можно осуществить в футоре странице. Для этого вы устанавливаете ссылку на сайт?nomobile=1:
<?php
//Проверяем если это get или post или coockie nomobile
if ( isset( $_REQUEST[‘nomobile’] ) && true == $_REQUEST[‘nomobile’] ) {
//теперь мы проверяем на существование cookie
if ( ! isset($_COOKIE[‘nomobile’]) ) {
setcookie(«nomobile», 1, (time()+60*60*24*30) );
}
} else {
//Нефига, проверим браузер мобильный или нет
//Список известных мобильных агентов
$moiles = array(«iPhone»,»iPod»);
foreach( $moiles as $moile ) {
if( preg_match( «#».$moile.»#i», $_SERVER[‘HTTP_USER_AGENT’] ) ) {
//ок, перенаправляем
header(‘Location:https://moile.site.ru/’);
exit();
}
}
}
?>
2. javascript User Agent
Данную функцию можно создать и с помощью javascript. Код очень похож на PHP, но сильно отличается по назначению.
В то время, как PHP-версия более глобальная, js-альтернатива больше подходит в тех случаях, когда у вас совсем немного или совсем нет контроля над кодом на стороне сервера, либо вы хотите сделать нечто более конкретное (например, целевую страницу).
Но js-код ограничен, так как требуется загрузить полностью сайт перед тем, как произойдет перенаправление.
<script type=»text/javascript»>
var moiles = array[«iPhone», «iPod»];//мобильное устройство
var i;
for(i=0;i< moiles.lenght;i++){
//проверяем соответсвует мобильному агенту или нет
var er = new RegExp(moiles,»i»);
if( er.test( navigation.userAgent ) ) {
window.location = «https://moile.site.ru/» ;
}
}
</script>
3. Код WordPress
WP уже имеет встроенный инструмент для определения устройств. Используя данную фишку мы можем запускать различные скрипты и стили, либо загружать/исключать определенные фрагменты кода.
<?php
function load_my_styles() {
global $is_iphone; //загружаем глобальную переменую
if( $is_iphone ) {
wp_enqueue_style( ‘iphone-style’, get_stylesheet_directory_uri() . ‘/ iphone-style.css’);
} else {
wp_enqueue_style(‘normal-style’, get_stylesheet_directory_uri() . ‘/ style.css’);
}
}
add_action( «wp_enqueue_scripts», «load_my_styles» );
?>
4. Media Queries
Media Queries разрешает нам применить стили, если какие-то конкретные правила возвращают вам значение TRUE. Чтобы использовать данный метод у нас есть пару переменных browser width, device width и pixel density.
/* Smartphones (portrait and landscape) ———— */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———— */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———— */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ———— */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ———— */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ———— */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ———— */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ———— */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ———— */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}