Как определить, что ваш сайт просматривают на телефоне

Как определить что ваш сайт просматривают на телефонеВ эпоху iPhone и iPad становится актуальным создание шаблонов, которые будут подстраиваться под разные разрешения экранов. Всем нам хочется чтобы наш сайт был читабельным вне зависимости на чём его просматривают.

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

Во-первых, нам необходимо написать функцию, которая будет определять на каком мониторе отображается сайт. С выпуском новых версии движка WordPress появились и новые глобальные переменные, которые позволяют определить не просматривают ли сайт на телефоне, а быть точнее на iPhone — $is_iphone

Напишим специальную функцию


<?php

function detect_iphone($iphone) {
 global $is_iphone;
 if($is_iphone) $iphone[] = 'iphone';
 return $iphone;
}
add_filter('body_class','detect_iphone');
?>

Эту функцию необходимо вставить в файл header.php перед закрывающимся тэгом Но будьте внимательны, если вы используете тему, которая установлена по умолчанию (т.е. TwentyEleven или тема  TwentyTen) то тогда функция сработает беспрекословно, если же вы используете другую тему, то удостоверитесь, использует ли ваша тема body_class()(т.е. добавляются ли классы стилей динамически). Одним из признаков этого метода будет строка наподобие этой . Если же ваша тема не поддерживает такой метод просто добавите следующую строку


<body <?php body_class(); ?>>

Во вторых, нам необходимо описать специальные стили, которые будут срабатывать для пользователей iPhone. К примеру такие,


h1 {
font-size: 30px;
line-height: 110%;
text-decoration: underline;
}
 .iphone h1 {
font-size: 35px;
text-decoration: none;
color: #FF0000;
}



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *