8 способов определения мобильных устройств и экранов Retina | CoolMobmasters.Com

:

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

Сегодня мы хотим представить вам несколько методов, позволяющих определить, какими браузерами пользуются посетители вашего сайта, чтобы вы могли обеспечить их лучшим опытом взаимодействия.

1. PHP User Agent

Когда браузер запрашивает у вашего сервера страницу, он также отсылает некоторые данные о себе, включая post data, реферера, а также user agent. Мы можем проверить совместимость user agent по списку известных мобильных user agent, так что у вас будет возможность перенаправить посетителя на иную версию вашего сайта, добавить новые cookie, выставить глобальную переменную, которая будет использована в вашей CMS, выставить HTML-классы и многое другое.

Сам код довольно простой, и мы можем использовать функцию preg_match() для сравнения текущего браузера с массивом мобильных браузеров:

<?php
//Here is the known mobile user agents list
$mobiles = array("iPhone","iPod");

foreach( $mobiles as $mobile ) {
if( preg_match( "#".$mobile."#i", $_SERVER['HTTP_USER_AGENT'] ) ) {
//Ok, this is a mobile browser, let's redirect it!
header('Location:http://mobile.mysite.com/');
exit();
}
}
?>

Этот код довольно удобный, так как вы можете отключить этот текст, например, посредством cookie, чтобы пользователи, которые хотят видят полную версию вашего сайта, могли сделать это, воспользовавшись ссылкой, приведенной в подвале. Трюк заключается в том, что вы устанавливаете ссылку на вашсайт?nomobile=1, а затем можете протестировать эту переменную перед тем, как переходить к перенаправлению:

<?php
//let's check if we have a get or post or cookie set to nomobile
if ( isset( $_REQUEST['nomobile'] ) && true == $_REQUEST['nomobile'] ) {
//now we check if we have set the cookie, so we don't need the "get" in the URL all the time
if ( ! isset($_COOKIE['nomobile']) ) {
setcookie("nomobile", 1, (time()+60*60*24*30) );
}
} else {
//nevermind, let's check if current browser is a mobile

//Here is the known mobile user agents list
$mobiles = array("iPhone","iPod");

foreach( $mobiles as $mobile ) {
if( preg_match( "#".$mobile."#i", $_SERVER['HTTP_USER_AGENT'] ) ) {
//Ok, this is a mobile browser, let's redirect it!
header('Location:http://mobile.mysite.com/');
exit();
}
}
}
?>

2. javascript User Agent

То же самое можно реализовать и при помощи javascript. Сам код довольно схож с методом на PHP, но цели использования сильно отличаются.

В то время, как PHP-версия более глобальная, js-альтернатива больше подходит в тех случаях, когда у вас совсем немного или совсем нет контроля над кодом на стороне сервера, либо вы хотите сделать нечто более конкретное (например, целевую страницу).

В целом, js-код ограничен, так как вам нужно загрузить целый сайт перед тем, как совершать перенаправление, что прямо противоречит версии на PHP, которая требует от вас, чтобы вы добавляли ее в качестве первого аргумента на странице (в другом расположении код просто не будет работать).

Итак, давайте взглянем на пример:

<script type="text/javascript">
var mobiles = array["iPhone", "iPod"];//mobile devices
var i;

for(i=0;i< mobiles.lenght;i++){
//testing if the RE matches the mobile agents
var er = new RegExp(mobiles,"i");
if( er.test( navigation.userAgent ) ) {
window.location = "http://mobile.mysite.com/" ;
}
}
</script>

3. Код WordPress

WordPress оборудован внутренним инструментом для определения мобильных устройств, так что у вас в руках есть глобальная переменная, которая объявляет, что текущий пользователь использует iPhone, к примеру (или другие браузеры и устройства). На этой основе вы можете запускать различные скрипты и стили, либо загружать/исключать определенные фрагменты кода.

Давайте рассмотрим пример:

<?php
function load_my_styles() {
global $is_iphone; //loading global var here
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. WordPress-плагины

Как и у Apple есть лозунг: «для всего найдется приложение», — у WordPress есть свой лозунг, в котором говорится: «для всего найдется плагин». Впечатляющее количество плагинов (как хороших, так и не очень) позволяет вам совершать практически все, что захочется, и при этом даже ни разу встретить взглядом строку кода.

Итак, вы можете найти несколько плагинов, которые помогут вам в этой задаче, — для некоторых нужно будет ввести некоторый код, а некоторые работают полностью автономно. Давайте рассмотрим несколько опций:

5. HTML-код для Retina

Впервые термин retina стал употребляться в 2010 году, и тогда это было нечто невероятно крутое! Все это предвещало большие изменения, так как все изображения и коды сайтов выглядели мутно, если не были оптимизированы соответствующим образом.

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

Все это можно реализовать в разделе \’head\’ вашего сайта, использовав следующие стили:

<link rel="stylesheet" type="text/css" src="css/common_style.css" />
<link rel="stylesheet" type="text/css" src="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio:2)" />

Но как-то раз нам удалось наткнуться на еще более простой способ.

6. Media Queries

Media Queries позволяют вам условно применять стили, если какие-то конкретные правила возвращают вам значение TRUE. Чтобы все это заработало, у нас есть несколько возможных переменных вроде browser width, device width и pixel density. Давайте взглянем на базовый media query, который используется в 320 и boilerplate:

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

Но этот вариант интересен, если вы хотите определять только устройства retina (чтобы изменить изображение фона или логотипа, к примеру):

@media only screen and (-webkit-min-device-pixel-ratio:2){
}

7. Media Queries при помощи javascript

Это самая малоизвестная техника, которую нам довелось встречать (самая сумасшедшая будет дальше, но давайте следовать порядку). Вы можете протестировать media queries при помощи javascript, и если будет получено положительное значение, к примеру, вы можете условно изменять классы, изменять src-атрибуты изображений, перенаправлять пользователей на другие страницы.

По нашему мнению, данный метод даже лучше, нежели метод на чистом коде js, так как он позволяет вам улучшить опыт взаимодействия, чего не скажешь про остальные альтернативные методы. Что здесь имеется в виду? Предположим, что мы хотим сделать то же самое при помощи PHP, — нам понадобится PHP-парсер, который бы искал все тэги изображения на вашей странице и заменял их собственным src с использованием ссылки до изображения retina. При помощи javascript и jQuery это решается невероятно быстро.

<script type="text/javascript">
//JS version for the retina query
var modern_media_query = window.matchMedia( "screen and (-webkit-min-device-pixel-ratio:2)");

if( modern_media_query.matches ){
//DO ALL THE THINGS HERE
}
</script>

8. htaccess-код

Итак, здесь разворачивается прямо черная магия. Суть здесь такая же, как и в первом PHP-методе, но итоговый код будет отличаться.

RewriteCond %{HTTP_USER_AGENT} “ipod|iphone|ipad|blackberry”[NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.yoursite.com%{REQUEST_URI} [R,L]

Первая строка кода проверяет user agent, и если все совпадает, то наш поиск «сохранит» результат. Затем вторая строка получает текущую страницу, а третья строка перенаправляет вас на мобильную версию.