Сложности современного масштабирования, часть 4

Браузеры и интернет-страницы при нестандартных масштабах и значениях DPI
В вебе мы проводим не меньше, а часто и больше времени, чем в приложениях. И в этой части мы поговорим о том, как с масштабированием веб-страниц и собственного интерфейса справляются браузеры, а также как выглядят интернет-страницы на экранах с высоким PPI.

Итак, с приложениями мы более-менее разобрались: масштабирование в новом интерфейсе зависит от системы, которая автоматически устанавливает параметры и для главного меню, и для приложений. Самостоятельно изменять параметры нельзя — по крайней мере, штатными средствами. Что касается старого интерфейса, то настройки масштабирования там гораздо более гибкие, и при этом пользователь может управлять ими вручную. Но качество отображения интерфейса в громадной степени зависит от доброй воли разработчиков, потративших время и усилия на оптимизацию интерфейса, а в оставшейся — от сложного взаимодействия компонентов системы и приложений, которое может вызывать к жизни какой-нибудь неожиданный сбой.

В то же время подавляющая часть современных пользователей достаточно много времени проводит в интернете, работая и развлекаясь на самых разных веб-сайтах. Проблема в том, что большинство интернет-сайтов тоже создавались исходя из представлений о том, что 96 DPI — неизменная величина. И у их разработчиков было еще меньше стимулов (а чаще — вообще никаких) отдельно продумывать оптимизацию под разный DPI/PPI. Подчеркну, речь идет именно об изменении DPI, а не об адаптации под разное разрешение традиционных мониторов. Следовательно, проблему масштабирования под мониторы с большим PPI для получения комфортного размера шрифтов и элементов интерфейса должны решать браузеры. Вот и посмотрим, как они это делают.

Сайты

Если отбросить экстремальные решения, то большинство сайтов (речь идет о традиционных сайтах с текстовым контентом, а не мультимедийных) делятся, грубо говоря, на две большие категории:

  • сайты с фиксированной шириной основной колонки (которая выравнивается по центру или по левому краю, оставляя остальное пространство экрана пустым) и
  • сайты с адаптивной шириной, которые растягиваются на всю ширину экрана (или окна браузера).

С первым случаем всё просто и понятно. Во втором случае колонки либо делят пространство в какой-то пропорции, либо вспомогательные колонки (меню, навигация и пр.) имеют фиксированную ширину (или какой-то диапазон в зависимости от ширины экрана), а наиболее информационно насыщенная центральная — переменную.

Собственно, за примерами далеко ходить не надо. Типичная иллюстрация первого подхода — разметка статьи на нашем сайте (статьи на iXBT.com имеют центральную колонку шириной 700 пикселей), пример второго — наш форум, forum.ixbt.com. Он имеет дизайн в три колонки, который используется на большинстве современных форумов. Левая колонка содержит информацию о пользователях и вспомогательные данные (она имеет определенный диапазон ширины), центральная (она растягивается на всю доступную площадь) содержит, собственно, посты, а правая — навигация и т. д. Чем шире экран, тем шире будет центральная колонка, т. к. она самая информационно насыщенная. Левая и правая колонки могут чуть расширяться и сужаться, но примерно сохраняют свою ширину. Правильно? Вроде да.

На сегодняшний день практически все сайты выполнены и оптимизированы под фиксированный DPI = 96 и хорошо показываются только в том случае, если PPI монитора примерно соответствует этому параметру. Если радикально увеличить PPI без изменения диагонали, то видимые размеры всех элементов (букв, картинок, кнопок и пр.) существенно уменьшатся. И чтобы сделать их читаемыми, приходится увеличивать масштаб в браузере.

Браузеры

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

Тем более что еще при тестировании Acer Aspire S7 стало понятно: то, насколько к масштабированию готов сам браузер, имеет очень большое значение при работе.

Так, при отсутствии поддержки масштабирования даже элементы интерфейса становятся слишком мелкими: неудобно читать мелкие шрифты, неудобно работать и даже кликать мышкой, не говоря уж об использовании пальца. Поэтому на Aspire S7, например, моим любимым браузером стал IE10… Впрочем, это мы забегаем вперед.

Кроме того, надо понимать, как именно и что он масштабирует.

Помимо формального зачета был и неформальный: мы просто игрались с настройками масштабирования сайтов, чтобы точнее понять, как и что работает. Итак, приступим.

Для теста мы взяли четыре популярных браузера:

  • Internet Explorer 10
  • Opera 12.15
  • Google Chrome 26.0.1410.64m (последняя версия на момент тестирования)
  • Mozilla Firefox 20.0.1

Все остальные слишком уж малораспространены и, как правило, используют движки вышеуказанных браузеров (хотя что там этих движков осталось: Opera, например, перешла на Webkit, оставив разработку Presto; правда, Chrome перешел на собственный движок Blink, но это пока только ответвление того же Webkit).

Далее мы посмотрели на поведение браузеров при следующих системных параметрах:

  • 96 DPI
  • 120 DPI (125%)
  • 120 DPI с отключенным XP Scaling
  • 144 DPI (150%)
  • 144 DPI с отключенным XP Scaling
  • 133% (свободное масштабирование)

Для каждой из вышеуказанных настроек снималось два скриншота: при масштабе интернет-страницы 100% и масштабе 150%. Тестовая система осталась та же: Lenovo Yoga 13 с экраном 13,3 дюйма и разрешением 1600×900 точек.

Поведение браузеров

Итак, как должен вести себя благопристойный современный браузер?

Во-первых, он должен поддерживать современные технологии масштабирования, в том числе быть DPI-aware. Другими словами, его интерфейс должен нормально выглядеть в любом разрешении и с любым DPI. Никаких отговорок приниматься не должно: все современные браузеры — это серьезные продукты, над которыми ведется постоянная серьезная работа по улучшению, поэтому отговорки, что у разработчиков не было времени или знаний для оптимизации под масштабирование, несостоятельны.

Во-вторых, он должен поддерживать возможность масштабирования контента (т. е. интернет-страниц), и делать это удобно для пользователя. Что бы мы ни думали, экраны все больше уходят от DPI = 96, а оптимизация сайтов вряд ли будет производиться в ближайшем будущем, поэтому только оптимизация браузера позволит нам комфортно работать с сайтами.

Причем по обоим направлениям ставки довольно высоки: если браузер не будет соответствовать этим требованиям, то с интернет-сайтами, да и с самим браузером просто невозможно будет работать на экранах с высоким PPI. Не сложно, а именно невозможно. Причем нужно помнить и о читаемости, и о возможности управления пальцем.

Раньше по этим направлениям был серьезный разброд, однако все современные браузеры имеют одинаковый механизм масштабирования, причем даже шаг одинаковый: 100, 110, 125, 150%. Более-менее свободное масштабирование могут делать IE (с точностью до 1%) и Opera (до 10 с помощью ползунка, но можно выставлять и свободный масштаб). У всех масштабирование можно проводить клавиатурным сочетанием Ctrl+«−» и «=». Для тех же целей можно использовать Ctrl+колесо мыши. При каждом нажатии браузер изменяет масштаб на ступеньку вверх/вниз и перерисовывает страницу под новое значение масштаба. Это традиционный способ масштабирования, привычный нам.

Однако с недавних пор появился еще один — жест масштабирования, тоже популяризированный компанией Apple. Разводим пальцы — и вуаля! Картинка увеличилась/уменьшилась. Для пользователя все выглядит очень просто, однако эта «простота» и наглядность обеспечиваются работой сложных и изящных технических алгоритмов. Для примера, в iOS масштабирование работает так: когда система уловила, что пользователь производит масштабирование, снимается скриншот, дальше он увеличивается с помощью обычных механизмов масштабирования картинки (поэтому пока вы продолжаете держать пальцы на экране, увеличенная картинка будет размытой). Когда вы отпускаете пальцы, система сообщает браузеру финальный масштаб, и он заново рендерит под него страницу. В рамках тестирования мы решили проверить, как работают с масштабированием жестами современные браузеры, тем более что для Windows 8 такой способ уже является штатным и довольно распространенным.

Internet Explorer 10

Я уже неоднократно писал, что последние версии Internet Explorer производят очень приятное впечатление. С точки зрения технологий, интерфейса и взаимодействия с пользователем вообще — это огромный шаг вперед. Не побоюсь сказать, что если человек с пафосом заявляет, что в этом браузере работать не может, то это явный повод относиться ко всем его последующим заявлениям с осторожностью и скептицизмом.

Правда, и я должен оговориться, что с весны браузер стал шалить (IE10 стоит на всех тестовых ноутбуках, поэтому я пользуюсь им постоянно и на разных системах): частые зависания страниц, нередко браузер подвисает целиком, если открыто в районе 10 вкладок и больше. Но зимой, когда я пользовался им на Acer Aspire S7 (а там им единственным было удобно пользоваться), всё работало очень неплохо.

Одним из его важных достоинств является то, что в Microsoft основательно поработали и над интерфейсом, сделав его более удобным и современным. Я уже не говорю о версии для нового интерфейса Windows 8, в которой под управление пальцем серьезно переработали весь интерфейс, и сделали это очень неплохо. Этот браузер единственный поддерживает корректное масштабирование жестами (к чему мы привыкли на браузерах мобильных устройств), причем в обеих версиях — и под новый, и под традиционный интерфейсы. В остальных браузерах масштабирование жестом работало ужасно либо не работало вообще. Делайте выводы.

Раз браузер разрабатывался в Microsoft, с масштабированием у него всё должно быть в порядке.

В общем, так оно и есть. Для желающих — вот полная версия этого файла (1600 точек по ширине), а вот gif-анимация.

При переходе с 96 на 120 DPI интерфейс увеличивается абсолютно корректно.  Интересно, что в IE10 (по-моему, единственном из участников тестирования) при увеличении DPI увеличиваются иконки сайта в заголовке закладки. В частности, поэтому немного увеличивается вертикальный размер вкладок. Для 133% используются те же иконки, что и на 96 DPI (видимо, чтобы не испортить некорректным масштабированием), а на 144 DPI они увеличиваются до того же размера, что и при 120 DPI.

Шрифты в меню увеличиваются, на странице — остаются теми же. Таким образом, даже при выставленном DPI = 144 (т. е. системный масштаб 150%) физический размер шрифта на странице останется таким же, как и при DPI = 96. Чтобы увеличить масштаб страницы, нужно прибегнуть к масштабированию в самом браузере.

Если увеличить масштаб до 150%, то шрифты и элементы дизайна становятся крупнее, и для их отображения требуется больше места. На главной странице нашего сайта все элементы увеличились пропорционально.

Полная версия здесь.

Из-за этого она выросла в размерах и перестала помещаться на экран, поэтому появился горизонтальный скроллинг (на экране 1600×900, а вот на ноутбуке с Full HD всё выглядело бы чудесно).

Версия с реальным разрешением здесь.

А вот на форуме левая и правая колонки стали пропорционально больше, а средняя уменьшилась (gif-анимация). И опять изменение DPI не влияет на содержимое страницы. На главной странице изменился внешний вид логотипа в левом верхнему углу. Обратите внимание, он стал немного более размытым, хотя ему это вроде даже пошло на пользу. Фотографии в новостях тоже стали чуть размытыми, а вот флэш-баннер справа остался четким.

Включение и отключение XP Style Scaling не оказывает на поведение браузера никакого влияния, т. е. он DPI-aware. Должен сказать, что с этой настройкой во время тестирования вообще были какие-то проблемы, очень часто галочка не снималась (опять же, претензии к разработчикам Microsoft). Но поскольку мы снимали скриншоты сразу для всех браузеров, то они должны находиться в одинаковом положении.

При изменении системной настройки с 96 на 120 DPI браузер Internet Explorer 10 увеличивает масштаб по умолчанию для всех страниц: вместо 100% всегда ставит 125%. Если зайти в меню масштабирования, то масштаб отображается именно как 125% (т. е. можно вернуться на 100%), при нажатии Сtrl+0 (масштаб по умолчанию) он выставится на 125%. Другие браузеры так не делают. Также браузер запоминает масштаб для выбранной страницы, и в дальнейшем она открывается с тем же масштабом, что был установлен в прошлый раз (остальные браузеры тоже умеют это делать).

У версии IE10, на которой проводилось тестирование, выявилась странная проблема: во многих ситуациях IE воспринимал выставленный в меню традиционными средствами масштаб как крайнюю точку отсчета: увеличить масштаб с помощью жеста было можно, а уменьшить (ниже этого значения) — нельзя. Но иногда браузер совершенно спокойно позволял масштабировать страницу и вверх, и вниз, причем речь шла об одном и том же сайте. Закономерности этого поведения за время тестирования мне проследить не удалось.

Google Chrome

Хотя история этого браузера гораздо короче, чему у других участников теста, но многими он воспринимается уже чуть ли не как фаворит. Благодаря своей скорости, функциональности и, не в последнюю очередь, маркетинговым стараниям Google.

Полная версия сравнения интерфейса находится здесь, gif-анимация — здесь.

И сразу нас ждет большой сюрприз: Goolge Chrome не поддерживает корректное масштабирование в Windows и не сообщает системе о том, что он DPI-aware. Хотя по скриншоту видно, что браузер все-таки учитывает то, какой параметр DPI выставлен в системе: мы видим, что даже при работе старого алгоритма заголовки окон на вкладках немного увеличиваются. Но увеличиваются они не так чтобы очень сильно, это заметно лишь в сравнении с работой стандартного алгоритма Windows.

Раз Google Chrome не оптимизирован под масштабирование (этот факт у меня как-то не укладывается в голове), то Windows включает для него свой алгоритм. Это сразу видно по размытому тексту. Шрифты и вкладки становятся большими, но зато размываются текст и линии.

Причем та же судьба ждет и текст в окне — он становится крупнее, но размывается. Вот сравнение старого и нового алгоритмов при 120 DPI (125%):

А вот при 144 (150%):

Здесь надо учитывать, что это скриншоты, и мы делали их на мониторе с небольшим PPI. На том же Acer Aspire S7 ситуация будет совершенно другой: текст при DPI = 96 (и масштабе 100%) просто нечитаем, а при DPI = 120, чтобы что-то прочитать, приходится вглядываться и наклонять голову к экрану. Для интересующихся — вот gif-анимация полного экрана со всеми ступенями масштабирования. На других браузерах, не поддерживающих масштабирование, картина будет такой же.

Масштабирование наших сайтов при тестировании Chrome проводил корректно, каких-либо сбоев я не отметил. По умолчанию Chrome всегда ставит масштаб страницы 100% независимо от выставленного в системе DPI. Однако тоже запоминает настройку масштаба для страницы и в следующий раз открывает ту в этом масштабе.

Google Chrome формально работает в новом интерфейсе Windows 8 и даже пытается поставить себя в качестве браузера по умолчанию. Кстати, тут есть тонкий момент: для нового интерфейса работает только один браузер, который установлен по умолчанию. Остальные будут открываться в десктопной версии.

Но на самом деле для работы в новом интерфейсе Windows 8 браузер Google Chrome не подходит. Во-первых, его интерфейс в этом режиме остается абсолютно таким же, как на десктопе, т. е. очень плохо подходит для управления пальцем. А во-вторых, к моему немалому удивлению, масштабирование с помощью жеста пальцами на нашей системе вообще не работало. А лазить каждый раз в меню — увольте.

Firefox

Firefox взаимодействует с системой, сообщая ей о готовности к масштабированию (DPI-aware), поэтому механизм Vista для него не включается — шрифты в интерфейсе приложения всегда остаются четкими и корректного размера.

Полный файл со сравнением (варианты там подписаны, они просто не влезли в сокращенную версию картинки) здесь, gif-анимация — здесь.

Как видите, механизм масштабирования работает хорошо, все шрифты увеличиваются. В то же время графика (например, иконка сайта) всегда остается одного и того же размера, т. е. на экране с высокой плотностью пикселей она станет слишком маленькой. Но это не так уж страшно. Гораздо хуже, что круглая иконка «Назад» тоже осталась того же размера — значит, чем больше плотность пикселей вашего монитора, тем сложнее по ней будет попасть. Наконец, обратите внимание на то, как написано слово Firefox. Оно действительно размывается при увеличении масштаба.

В Firefox размеры интернет-страницы (включая шрифты) не меняются в зависимости от системной настройки, как и в других браузерах. Другими словами, вам придется вручную масштабировать страницу для получения желаемого размера. Firefox предоставляет такую возможность, но почему-то не показывает текущий масштаб. Из-за этого я, возможно, пару раз промахнулся с установкой нужного масштаба (это видно только при прямом сравнении размера сайта в окнах). При этом браузер запоминает настройку масштабирования для страницы, т. е. в следующий раз она откроется с тем же масштабом.

Масштабирование пальцами работает, но я бы назвал это некорректной работой. Firefox, видимо, воспринимает движение пальцами на какое-то небольшое расстояние как поворот колеса мышки на один щелчок (или нажатие сочетания клавиш) и пытается перерисовать картинку под новый масштаб, но это занимает у него время. Так что если вы широко двинете пальцами, следующие секунд пять будете наблюдать судорожные перерисовки страницы под несколько ступеней масштаба — последовательно! Настраивать масштаб под себя таким образом очень сложно и муторно, лучше уж воспользоваться меню.

Opera

Opera — старый, заслуженный браузер с минимальной долей рынка в мире, но при этом довольно популярный среди энтузиастов у нас. В общем, вполне ожидаемо, что корректной поддержки масштабирования Windows у него нет, о DPI-aware системе он не сообщает.

Полное сравнение интерфейсов (с подписями, ширина 1600 точек) — здесь, gif-анимация — здесь.

Причем, что самое смешное, сам по себе интерфейс браузера корректно масштабируется! По крайней мере, шрифты увеличиваются. Правда, графика (иконки) остается того же размера, и кнопки, к сожалению, тоже не увеличиваются в размерах. Ну и что — у Firefox так же, но он же сообщает системе о поддержке масштабирования. Обратите внимание, что, в отличие от Firefox, заглавие Opera здесь — текст, а не картинка.

Казалось бы, подумаешь — не прописали нужную строчку. Масштабирование-то работает! Однако работает лишь до поры до времени — точнее, до тех пор, пока не изменится какой-нибудь внешний фактор. Например, пока кто-нибудь не выставит масштаб на 151% или отключит старый механизм масштабирования, или пока Microsoft при очередном обновлении не сделает так, что по умолчанию будет включаться новый алгоритм. Вот тогда придется в срочном порядке выпускать новую версию и убеждать всех пользователей установить именно ее.

По поведению с включенными новым алгоритмом Opera не отличается от Chrome, поэтому тут особо комментировать нечего. Opera так же, как другие браузеры, всегда ставит для картинки масштаб по умолчанию на 100%, но тоже запоминает выставленный пользователем для конкретной страницы масштаб. Кстати, у нее ползунок масштаба вынесен прямо в правый нижний угол основного окна, так что работать с ним удобнее (подчеркну: речь идет о настройках по умолчанию. Разумеется, с пользовательскими настройками можно достичь многого). Масштабирование пальцами работает так же, как у Firefox, с той же дерготней и перерисовыванием страниц.

Браузеры в режиме Metro

Что касается современного интерфейса Windows, то с ним есть несколько особенностей работы. Во-первых, в нем работает только один браузер — который выбран для системы как браузер по умолчанию. Остальные браузеры при запуске будут перебрасывать вас на десктопную версию. И да, если в качестве браузера по умолчанию стоит не Internet Explorer 10, то он тоже будет переходить на десктопную версию, версия для нового интерфейса работать не будет. Даже если запустить браузер из нового интерфейса.

С другой стороны, ни один из остальных браузеров, участвовавших в тестировании, в новом интерфейсе нормально не работает. Что ставит пользователя в довольно глупую ситуацию: либо оставлять в качестве браузера по умолчанию IE10 везде, либо терять возможность пользоваться браузером под новый интерфейс вообще. Для десктопов это не очень актуально, а вот для планшетов и трансформеров — еще как.

Goolge Chrome единственный из остальных умеет работать в новом интерфейсе, но очень странно. Он открывается на весь экран, но при этом полностью сохраняет десктопный интерфейс (дизайн, размер вкладок и пр.). Управлять в нем пальцем на Yoga13 еще нормально, а вот на Aspire S7 уже никак. Интернет-страницы открываются на 100% (а не 125% или 150%). Ко всему, он вообще не поддерживает масштабирование пальцем (для обеих систем — это уже за гранью добра и зла). При этом он навязчиво предлагает себя в качестве браузера по умолчанию, что грозит слабо разбирающемуся пользователю с планшетом потерей немалого количества нервных клеток.

Разработчики Firefox обещают, что версия под новый интерфейс будет, даже вроде бы есть какие-то беты (работа начата год назад и, судя по внушительному списку проблем, отладка кипит), но финальной версии браузера для нового интерфейса в магазине приложений нет.

Opera, судя по всему, в новом интерфейсе не работает совсем.

В любом случае Internet Explorer 10 сейчас остается единственным нормально работающим браузером под тач-интерфейс. Google Chrome имеет ряд существенных недостатков, не позволяющих работать с ним адекватно.

Замечания и размышления

Итак, суммируем полученную информацию. Во-первых, мы еще раз убедились, что старый механизм масштабирования работает и при DPI больше 120, вплоть до 144 (т. е. до масштаба в 150%). После 144 он все-таки отключается. Если для 120 DPI это поведение оправдано, то от 120 до 144 DPI (от 125 до 150%) его полезность представляется сомнительной, т. к. элементы в исходном размере становятся слишком мелкими. Впрочем, мы уже подробно обсудили это в части про приложения и объяснили, как отключить старый механизм, а дальше решение должен принимать сам пользователь.

Также я обратил внимание, что если при масштабе в приложении 150% выставить еще и DPI = 144 и отключить галочку масштабирования в стиле ХР, то шрифты воспринимаются уже не мутными — скорее, они похожи на то, как выглядят шрифты с активированным сглаживанием. В свое время я наткнулся на мнение, что механизм масштабирования Vista выглядит плохо только на современных мониторах, а вот когда повсеместно будут распространены мониторы со сверхвысоким PPI, на них этот механизм покажет свою эффективность, ибо размытость там уже будет незаметна, а вот универсальное масштабирование — полезная штука, особенно при больших коэффициентах, больше 150-200%. При случае мы проверим, насколько это реально работает для мониторов со сверхвысоким PPI.

Также хочу кратко отметить, что для мониторов со сверхвысоким PPI использование системного алгоритма масштабирования для браузера (вместо его собственного) представляется зачастую более предпочтительным решением, т. к. в этом случае верстка страницы передается абсолютно корректно, как при DPI = 96.

Во время работы с Aspire S7 я несколько раз отмечал, что Chrome и Opera заметно коверкали верстку на некоторых сайтах (Firefox там не был установлен). Речь идет о сайтах с выравниванием по ширине экрана: если в тексте стоит картинка с размером в пикселях и текст обтекает ее, то при масштабировании картинка остается того же размера, но ее положение по отношению к тексту все время разное, и обтекает он ее по-разному. Так что любое изменение масштаба сопровождалось мучительными дерганиями и пересчитыванием всех колонок текста. Впрочем, это проявлялось отнюдь не на всех сайтах, т. е., я думаю, для появления дефекта сайт также должен содержать некие ошибки в верстке. Мне не хотелось бы формализовывать это направление исследований, т. к. в любой момент может обновиться сайт или браузер — и проблемы исчезнут или станут другими. В то же время с этой ситуацией я столкнулся лично и предупреждаю о ней читателей.

Кстати говоря, во время тестирования Aspire S7 и IE10 я столкнулся с еще одной проблемой. Однако, на мой взгляд, эта проблема общая и будет проявляться независимо от браузера. Дело в том, что при использовании жеста масштабирования IE10 использует тот же механизм, что и мобильные браузеры: при увеличении масштаба ширина сайта, оптимизированного под ширину экрана, не пересчитывается под новый масштаб, а просто часть изображения или интерфейса уходит за край экрана. Этот подход оправдан для мобильных устройств с небольшими экранами — иначе у них центральная колонка получалась бы слишком узкой при крупных шрифтах.

Вот только при ее применении на экранах ноутбуков и десктопов иногда получается следующее: на экране с высоким разрешением и при настройках DPI по умолчанию сайт, оптимизированный по ширине окна браузера, раскроется на все горизонатльное разрешение. Его центральная колонка получится слишком широкой, а текст в ней — слишком мелкий. И если воспользоваться увеличением масштаба, то может получиться так, что когда размер шрифта станет комфортным для чтения, центральная колонка с текстом окажется шире, чем экран, и читать без горизонтального скроллинга будет невозможно.

Ну что же, а теперь давайте переходить к выводам.

Выводы

Во время тестирования браузеры работали корректно, и проблем с масштабированием интернет-страниц нашего сайта (и положением картинок) я не отметил. Масштабирование сайтов в целом всеми браузерами производилось адекватно, алгоритм масштабирования (когда масштаб задает пользователь, а не системная настройка) у всех правильный. Особо хочу отметить поведение IE10, который ставит по умолчанию масштаб 125% при значении DPI 120 и выше: это правильный подход, экономящий нервы и время пользователя. В то же время, как вы сами понимаете, интернет — штука весьма разнородная, и практически наверняка проблемы где-то да проявятся. К этому следует быть готовым.

С масштабированием интерфейсов проблемы возникли у всех браузеров. Chrome и Opera необходимо доработать оптимизацию интерфейса и проставить соответствующую отметку для Windows. Из-за отсутствия поддержки у них могут возникать проблемы при работе на экранах с высоким DPI. Три браузера (кроме IE10) при увеличении масштаба оставляют иконки сайтов того же размера. А самое неприятное — что графические элементы интерфейса, в первую очередь кнопки, у них также не увеличиваются при масштабирования. Поэтому на экранах с высокой плотностью пикселей они будут слишком мелкими для корректной работы, а уж пальцем с ними и вовсе вряд ли совладаешь.

Единственный браузер, нормально работающий в интерфейсе Metro, — это IE10. Во-первых, его интерфейс заметно оптимизирован для работы с тачем и пальцем (причем он существенно переработан по сравнению с десктопной версией). Во-вторых, в нем единственном нормально работает масштабирование с помощью жеста двумя пальцами по сенсорному экрану (да и вообще нормально работает, без постоянных рывков). В-третьих, он выставляет масштаб страницы по умолчанию в 125% при увеличении системной настройки. К сожалению, у него намного чаще, чем у других браузеров, возникают проблемы в работе (зависания, сбои и т. д.), но по уровню сервиса (особенно для пользователей, которым важны простота и удобства) он намного лучше конкурентов.

Особо хочется отметить поведение Chrome, который пытается поставить себя как браузер по умолчанию для нового интерфейса при том, что в интерфейсе Metro с ним работать неудобно: он не имеет оптимизации под работу пальцем, а также в нем отсутствует корректное масштабирование. Такое поведение создает пользователю массу ненужных проблем.




2 июля 2013 Г.