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

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

подход, так как браузер все равно может загрузить все содержимое, даже ненужное
в данной ситуации (подробнее об этом рассказывается на странице http://www.
quirksmode.org/blog/archives/2010/08/combining_media.html). Так что не думайте,
что медиазапросов будет достаточно для решения всех проблем мобильного веб-
дизайна — используйте их лишь в качестве одного из инструментов мобильной
оптимизации.

На какой размер области просмотра стоит ори-
Если вы планируете ориентиро- ентироваться при добавлении медиазапроса для
ваться на какое-то определенное мобильных устройств? Размеры экранов мобиль-
устройство, можете проверить ных телефонов могут сильно различаться, но у
размер его экрана на странице большинства популярных телефонов, включая
http://cartoonized.net/cellphone- iPhone и многие устройства на базе Android,
screenresolution.php. разрешение экрана составляет 320×480 пикселов.
Редко встречаются телефоны с более крупными
экранами. Дизайн страницы нашей выдуманной
пекарни начинает разъезжаться при сужении приблизительно до 550 пикселов.
Давайте в нашем третьем медиазапросе ориентироваться на эту ширину; она по-
дойдет для отображения на мобильных устройствах с экранами 320×480 и чуть
более крупными.
Однако прежде чем добавлять этот медиазапрос, давайте обсудим ширину устройства.

что такое ширина уСтройСтва?

Одна из характеристик медианосителя, которую можно использовать в медиаза-
просах, называется device-width, а также существуют min-device-width и max-
device-width. Ширина устройства (device width) — это число пикселов, составля-
ющее ширину фактического устройства или дисплея, а не области просмотра сайта.
Например, у настольного компьютера с разрешением экрана 1280×800 пикселов
ширина устройства составляет 1280 пикселов. Когда вы указываете в медиазапросе
значение device-width, размер окна браузера игнорируется и учитывается только
разрешение пользовательского дисплея.
На мобильных телефонах концепция окон чаще всего не используется — «окно»
всегда такого же размера, что и сам экран телефона, поэтому здесь не существует
области просмотра в том смысле, как на экранах больших настольных компьютеров.
Ориентироваться стоит именно на ширину устройства.
Однако существует небольшая хитрость. Разработчики Apple не всегда устанав-
ливают для своих продуктов значение device-width, равное фактическому числу
пикселов по ширине экрана, как это делают создатели большинства других теле-
фонов. Например, у устройств iPhone до версии 4 и устройств iPod Touch размер
экрана составляет 320×480 пикселов, но даже если пользователь держит устройство
горизонтально и ширина экрана равна 480 пикселам, Mobile Safari все равно со-

www.trk.kg