4 способа определения мобильных устройств и экранов Retina

      Комментарии к записи 4 способа определения мобильных устройств и экранов Retina отключены

Как осуществить определение мобильных устройств?

В наше время нам доступно большое множество различных мобильных браузеров и поэтому не будет лишним оптимизировать сайт и для мобилок. Но чтобы это сделать нам следует определить каким устройством пользуется человек открывший сайт.




Существует несколько методов для этого которые мы и рассмотрим:

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 */
}