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

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

Он говорит мобильному браузеру, что размер области просмотра макета должен
быть равен ширине устройства или размеру экрана. Сохраните страницу и откройте
ее на iPhone или похожем устройстве — вы увидите, что мобильный браузер ис-
пользует для отображения макета только 320 пикселов, поэтому медиазапрос для
очень узких экранов успешно срабатывает (рис. 6.22).

теСтирование медиазапроСов
Во время разработки медиазапросов вам постоянно приходится менять размер браузе-
ра — увеличивать и уменьшать окно, проверяя, правильно ли работают написанные вами
стили. Позвольте мне поделиться с вами несколькими рекомендациями относительно того,
как упростить и ускорить тестирование медиазапросов.
Прежде всего, веб-приложение ProtoFluid (http://protofluid.com) специально предназначено
для тестирования медиазапросов. Вы указываете URL-адрес и выбираете устройство, на-
пример iPhone или Motorola Droid, на экране которого хотите проверить свой сайт. Ваш сайт
открывается в окне такой же ширины, как и выбранное устройство, оснащенном кнопкой
для быстрого изменения ориентации экрана. Однако помните, что это не настоящий эму-
лятор устройства — всего лишь окно размером с его экран. Например, это представление
неправильно отражает работу тега meta для области просмотра. Кроме того, ProtoFluid не
поддерживает свойство device-width для медиазапросов, поэтому для тестирования ис-
пользуйте характеристики min-width и max-width, а затем, на готовой странице, можете
заменить их характеристиками min-device-width и max-device-width.
Еще один способ тестирования медиазапросов, который нравится лично мне, такой: с по-
мощью расширения Web Developer (http://chrispederick.com/work/web-developer) опре-
делите в Firefox несколько разных размеров области просмотра. В меню Resize (Изменить
размер) можно добавить сколько угодно размеров окон и областей просмотра. Создайте
запись, описывающую распространенный размер экрана мобильного устройства, например
320×356 пикселов для видимой области экрана iPhone в портретном режиме или 480×208
для альбомного режима. Также добавьте размеры, соответствующие тем медиазапросам,
которые вы добавили в свою таблицу стилей. После этого вам нужно будет только щелкнуть
пункт меню, и размер окна браузера моментально поменяется. И снова, это не полная
имитация поведения мобильных устройств, всего лишь быстрый способ протестировать
страницу в окнах разной ширины.

Однако если повернуть iPhone горизонтально, то в альбомной ориентации все так
же отображается страница шириной 320 пикселов, а не 480. Mobile Safari попросту
масштабирует ее, вместо того чтобы менять размер области просмотра макета,
и логотип и прочие изображения становятся немного расплывчатыми.
Вы наверняка догадались, в чем причина — оба устройства, iPhone и iPod Touch,
сообщают, что их ширина равна 320 пикселам, причем как в портретном, так и в
альбомном режиме. Для того чтобы Mobile Safari в альбомном режиме увеличивал
область просмотра макета до 480 пикселов, нужно запретить ему масштабирова-

www.trk.kg