Блог стал iPhone-friendly

Владельцы многофункциональных мобильных устройств не дадут мне соврать, что чаще всего люди используют свои навороченные гаджеты равнозначно как для звонков, так и для мобильного интернета. Однако, не всегда удобно обозревать полноразмерные веб-сайты на небольших дисплеях, скажем, как у iPhone. Поэтому было принято решение адаптировать текущую тему блога для наиболее удобного обозрения на мобильных устройствах.

Что касается iPhone, то здесь всё предельно просто — разрешения дисплеев у всех поколений устройства едины. Только вот не представляю как в данном вопросе обстоит дело с Retina. Как бы там ни было, подозреваю, что внесённые в шаблон дополнения с радостью применяться и в браузере на Android.

Основное исправление

Для применения расширяющего .css, в голову шаблона (<head>, как правило в файле header.php) необходимо включить следующие строки:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />

При этом необходимо соблюсти очерёдность указываемых .css так, чтобы основной .css фигурировал в коде раньше этих строк. Таким образом, описанные в основном .css-файле значения смогут быть переопределены в mobile.css, который может быть применён в указанном виде только к устройствам, ширина дисплея которого не превышает 480 пикселей.

Показания акселерометра и CSS

Теперь о правках .css-файла, которые отвечают за применение тех или иных свойств к указанным объектам, в зависимости от текущей ориентации устройства. Создавая мобильный .css, я решил начать с описания свойств объектов при вертикальной ориентации устройства. Затем, в специальной обёртке я переопределил значения объектов с фиксированными ширинами, для их аккуратного рассредоточения при горизонтальной ориентации:

.sample {
	width: 320px;
}

...

@media screen and (orientation:landscape) {

.sample {
	width: 480px;
}

...

}

И немного результатов

Метки: , ,

Поделись ссылкой!

Оставить комментарий

XHTML: Вы можете использовать эту разметку: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>