Главная > Вебмастеринг > Верстка для мобильных устройств

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

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

В настоящее время набирает популярность, такое программное обеспечение, как корпоративный портал.

Корпоративный портал (англ. Enterprise portal) — это, в общем случае, веб-интерфейс для доступа сотрудника к корпоративным данным и приложениям.

В частности, он позволяет ставить сотрудникам задачи и проверять их исполнение. Если сотрудник на момент постановки ему задачи находится не на рабочем месте, он может зайти в свой профиль на корпоративном портале используя мобильное устройство и посмотреть поставленную задачу.
В связи со всем выше описанным, веб–разработчику необходимо учитывать правила верстки для мобильных устройств при разработке шаблонов, например, для корпоративного портала.
После небольшого вступления, переходим непосредственно к правилам:
Определение типа документа — для мобильных устройств используется следующие объявления DTD в начале документа:
• Специальный DOCTYPE для мобильных устройств:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

При его использовании нужно добавить следующий мета-тег:

<meta name="MobileOptimized" content="ширина" />

Он выводит страницу, адаптируя вывод под ширину экрана КПК или мобильного телефона. Атрибут content задает ширину в пикселях.

- Второй способ — можно использовать DTD как для обычного сайта, например:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

и специальный мета-тег:

<meta name="viewport" content="width=ширина" />

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

- Таблицы стилей подключаются с атрибутом media=»screen,handheld» — это обозначает, что подключаемые в них таблицы стилей специально разработаны для устройств типа КПК.

<link rel="stylesheet" type="text/css" media="screen,handheld" href="" />

- Тег link с атрибутом rel=»apple-touch-icon» позволит владельцам iPhone увидеть ссылку на ваш сайт в виде иконки в SpringBoard.

<link rel="apple-touch-icon" href="адрес_изображения" />

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

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

Если с вашим телефоном случилась неприятность, то вы можете заказать запчасти для мобильных телефонов в компании либерти.


Комментарии:

Об авторе: admin