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

Изменение макета для просмотра на мобильных устройствах • 241

стороне с помощью свойства background-size, у обычного браузера в распоряжении
оказывается в два раза больше пикселов, чем требуется для вывода 64-пиксельного
изображения. Но iPhone 4 в обычной ситуации удваивает каждый пиксел, из-за
чего изображения становятся немного расплывчатыми. Мы сами представляем
ему двойное количество пикселов, поэтому удвоение не требуется, и картинки на
экране выглядят красивыми и четкими.

Это лишь одно из изменений, которые можно добавить на страницу для на iPhone 4.
Намного больше идей для дисплея с высоким разрешением вы найдете в статье Люка
Вроблевски (Luke Wroblewski) «Designing for the Retina Display (326ppi)» (http://www.
lukew.com/ff/entry.asp?1142).

тег mEta для оБлаСти проСмотра
Если вы сохраните страницу со всеми внесенными до этого момента изменениями,
откроете ее в настольном браузере и попробуете уменьшить окно браузера, все будет
работать в точности так, как ожидалось. Но если загрузить ее на смартфон, такой
как iPhone или устройство на базе Android, вас наверняка удивит, что ни один из
медиазапросов не работает. Страница будет отображаться с обычными стилями:
вы увидите стандартный макет с двумя столбцами, только в меньшем масштабе
(рис. 6.21).

Рис. 6.21. На многих мобильных устройствах для отображения страницы используется
широкий макет с двумя столбцами, а не стили из третьего медиазапроса

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

www.trk.kg