Page 242 - Сила CSS3 Освой новейший стандарт

242 • Глава 6. Разные размеры экрана, разный дизайн

щищает от искажения веб-страницы, не предназначенные для отображения в кро-
хотной области просмотра шириной 320 пикселов. Эксперт по разработке мобиль-
ных веб-страниц Питер-Пол Кох (Peter-Paul Koch) называет эту виртуальную область
просмотра «областью просмотра макета», а фактическую видимую площадь — «ви-
зуальной областью просмотра».
Когда вы заходите с мобильного телефона на веб-
Подробное объяснение концеп- страницу, мобильный браузер уменьшает ее так,
ции мобильных областей про- чтобы область просмотра макета поместилась
смотра, а также обсуждение тега на экране целиком. Все элементы становятся
meta вы найдете в статье Питера- крошечными, но макет в целом выглядит так же,
Пола «A tale of two viewports — как в обычном настольном браузере. В каждом
part two» по адресу http://
www.quirksmode.org/mobile/ мобильном браузере используется своя ширина
viewports2.html. области просмотра макета: для Mobile Safari на
iPhone и iPod Touch она составляет 980 пиксе-
лов, для Android Webkit — 800 пикселов, а для
Opera — 850 пикселов. Однако общий смысл в том, что мобильные телефоны делают
вид, будто их экраны больше, чем на самом деле. Вам же порой хочется, чтобы они
перестали притворяться и честно сообщали число пикселов на своих дисплеях.
К счастью, существует специальный тег meta, назначение которого — сообщать
мобильным браузерам о наличии специальной оптимизированной версии сайта.
С помощью этого тега вы можете корректировать размер и уровень масштабиро-
вания области просмотра макета.

Как это работает
Этот тег оптимизации мобильной версии называется тегом meta для области про-
смотра, так как в качестве значения атрибута name вы указываете viewport (т. е.
«область просмотра»). Выглядит он так:

<meta name="viewport" content="">

Значение атрибута content — это инструкция мобильному устройству, опреде-
ляющая, каким образом он должен поступить с областью просмотра. В табл. 6.3
перечислены возможные значения атрибута content.

Таблица 6.3. Свойства атрибута content тега meta для области просмотра
Свойство Описание

width Ширина области просмотра в пикселах. Можно указать либо
фактическое число пикселов, либо значение device-width

height Высота области просмотра в пикселах; можно указать либо
фактическое число пикселов, либо значение device-height

www.trk.kg