Как в iPad 3 работает браузер
Немного расширю тему о том, почему на iPad 3 сайт www.apple.com смотрится даже лучше, чем на 30-дюймовом экране Apple Cinema Display. Попросил друзей посмотреть в код, где и обнаружился javascript-овый блок (window.devicePixelRatio), подменяющий картинку при проверке на разрешение. Скрипт этот вот тут: http://images.apple.com/v/ipad/a/scripts/image_replacer.js и понимая что сайт смотрят с нового iPad 3, он выдаёт контент высокого разрешения. Так я и думал, собственно.
Так что может он, этот iPad 3, если нужно, выводить графику на сайте в высоком разрешении. Но с обычными сайтами он поступает иначе - грузит их так, чтобы сайт целиком помещался в окно браузера, и при этом не нужно было применять лишнее масштабирование. Если хотите аналогии, то это как в Windows поставить большие размеры шрифтов, или в браузере "позумить" картинку колесом мышки, удерживая CTRL. Делается это вот почему - существуют сайты с резиновым дизайном, которые тянутся на всю ширину браузера или его большую часть. Если их смотришь на большом мониторе, сайты эти занимают весь браузер от края до края. Порой это выглядит кошмарно.
Очень хорошим примером резинового дизайна является контент блогера Рустема Адагамова, который drugoi. Его вёрстка на большом экране растягивается на всё окно, строки становятся длинными-длинными. Читать такой текст в нормальном масштабе неудобно, и я его увеличиваю, при этом теряя резкость иллюстраций за счёт масштабирования - их размеры растут вместе с текстом. Но, в отличие от шрифтов, картинки начинают при масштабировании деградировать в качестве - это же примитивный быстрый апскейл.
Вот так выглядит блог юзера drugoi, когда ширина колонки 2048 пикселей
Если бы блог Рустема тянулся на iPad 3 на всю ширину, а иллюстрации оставались бы прежнего размера, читать это было бы жутко неудобно - пришлось бы прокручивать каждую строку при чтении или любоваться миниатюрнейшими буквами. Пользователи iPad и iPhone помнят, что при изменении масштаба пальцами движок изменяет размер всей страницы, а не отдельных блоков, как в некоторых других браузерах. Это позволяет увеличивать лист как бы "зумом", а не переформатировать его, нарушая оригинальный авторский стиль. С этим часто сталкиваются читатели на смартфонах, когда приходится выбирать размер шрифта больше и текст прокручивать не только вниз, но и влево-вправо. Там это жутко утомляет. Чтобы этого не было, Apple Safari на новом iPad 3 грузит страницу "с зумом", при этом картинки загружаются обычного разрешения, а шрифты увеличиваются. Как и в случае с браузером на ПК, качество шрифтов при масштабировании не деградирует ввиду их векторной природы. Ну а картинки в резкости теряют, конечно.
Так выглядит этот текст на iPad 3 при масштабировании по ширине экрана.
Для сравнения, вот как выкручивается из ситуации браузер смартфона Samsung Galaxy Nexus на четвёртом Android:
Он переформатирует колонку текста так, чтобы шрифт имел нормальный размер, при этом не трогает картинку. Но при зуме на весь экран картинка оказывается слишком крупной и не помещается, поэтому блоги drugoi и sergeydolya, перемежающих текст графикой, на таком смартфоне читать не самое приятное занятие.
Я не web-дизайнер, и навскидку мне кажется, здесь есть над чем поработать не только Apple. Купертинцы могли бы встроить в Safari на видном месте опцию "грузить сайт в полном разрешении", а web-программисты могли бы поработать над тем, чтобы резиновые сайты на такого рода устройствах с экранами высокого разрешения не растягивались, а отображались с более высокой детализацией. Конечно есть и третий вариант - допилить движок Safari так, чтобы он производил реформатирование контента, только боюсь, что это самый неверный путь, который приведёт к искажению большого количества сайтов. Ну а ввиду того, что экраны на планшетах и компьютерах вскоре прилично прибавят в разрешении, образовывается очень приличный способ задуматься.