Сайты для мобильных телефонов

23 June 2011 #web#design

В качестве основы оформления сайта zendaily.ru был взят проект html5boilerplate.com. Почему? Да все очень просто.

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

Но самое интересное заключается в поддержке мобильных телефонов!

CSS

В самом конце файла style.css присутствует несколько блоков:

@media screen and (max-device-width: 480px) {

    /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */

}

@media print {
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
    a, a:visited { color: #444 !important; text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
}

Блок @media print определен заранее и предназначен для стилей, используемых при печати страницы. Изменяются цвета фона страницы, цвета текста, изменяется оформление блоков кода и цитат, так как при печати цвет в большинстве случаев не используется, то они выделяются границами. Изменяются поля страницы, и самое интересное, меняется вид ссылок, теперь рядом с названием каждой ссылки в скобках будет указан сам адрес, на который данная ссылку указывает.

Блок @media screen and (max-device-width: 480px) предназначен для определения стилей отображения, используемых при просмотре на экранах с шириной меньше 480px. Под эту категорию как раз попадают мобильные телефоны.

Что именно писать в данном блоке? И как его использовать?

Screen (max-device-width: 480px)

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

Нам же необходимо сделать так, чтобы сайт вписывался под размер экрана сотового телефона. Для этого в блоке @media screen and (max-device-width: 480px) прописываем:

#container {
    margin: 1em auto;
    max-width: 90%;
}

Таким образом для обычных экранов у нас все остается без изменения, а для небольших экранов изменяется максимальная ширина, в примере она составляет 90%, и задается новый отступ от верхнего края, при этом сам блок будет располагаться по центру экрана.

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

Так же при формировании интерфейса сайта на мобильном телефоне некоторые элементы нужно просто убрать, так как использовать их будет тяжело, или же просто не нужно на данном устройстве. Делается это просто:

.mach {
    display: none;
}

У элемента, который необходимо скрыть, берем его идентификатор и затем в css-файле прописываем для него свойство display: none;.

Итоги

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

В любом случае использование возможностей css значительно упрощает создание “универсальных” сайтов, с которыми можно работать не только на обычных компьютерах, но и на мобильных устройствах.