Как работает увеличение масштаба в браузерах и стоит ли отключить масштабирование текста?

Question

[Алексей Струков]

Подскажите пожалуйста как работает увеличение масштаба в браузерах? В ходе экспериментов пришел к выводу что там меняется ширина viewport и следовательно срабатывают media queries, а не просто масштабируются все элементы.
Если это так, то встает вопрос, а на сколько критично оставлять пользователям возможность менять масштаб одного текста, рискуя сломать layout и выставить свой сайт в нелицеприятном виде?

Comments

[copal]

масштабирование точно не стоит отключать я часто им пользуюсь.

[Алексей Струков]

copal: а что мешает масштабировать весь сайт?

Answer 1

[Mr Crabbz]

Не только вьюпорт меняется, но и pixel aspect ratio. Дабы пропорционально всё было. Я бы запретил масштабирование текста отдельно от всего макета.

Comments

[Алексей Струков]

про pixel aspect ratio не заметил. В чем оно проявляется? Думаю что если в мете указан viewport и initial-scale=1.0 то тогда физические пиксели приравниваются к пикселям CSS и следовательно pixel aspect ratio не будет ни на что влиять.

[Mr Crabbz]

Алексей Струков: Неа. Расскажу пример.
У меня планшет, например, имеет экран 1280x800. Но pixel aspect ratio у него х2. Макеты цсс из медиа запросов он выбирает соответственно 1280x800/2 - 640х400. И initial-scale на это никак не влияет. То есть, привязки пикселов CSS к физическим пикселам девайса за счёт initial-scale нет. Другое дело, что можно делать особые условия для (max-width:640) and (max-height) and (-webkit-min-device-pixel-ratio: 2) - но это уже другая история.

Наглядно эти штуки можно глянуть в инспекторе хрома в режиме проверки адаптивной верстки - там прямо списком забиты популярные девайсы для тестов (Galaxy S5, iPhone и т.п.)

[Mr Crabbz]

Роман Краббз: Я немного неправильно выразился в ответе на пост - pixel aspect ration не меняется. Изначально макеты рендерятся по pixel aspect ratio девайса и потом масштабирование делается равномерно на всё сразу. Вот так правильно.
Правильная штука - менять размер текста вместе с размером всего остального (пропорционально). Тогда вёрстка не сломается.

[Алексей Струков]

Вот что сайт гугл девелопер говорит про это:
"Аппаратный пиксель: физический пиксель на экране. Например, у iPhone 5 ширина экрана составляет 640 аппаратных пикселей."
"Аппаратно-независимый пиксель (Device-independent pixel, dip): результат масштабирования пикселей устройства до размеров опорного пикселя для просмотра с нормального расстояния, представляет собой примерно одну величину на всех устройствах. Ширина экрана iPhone 5 составляет 320 аппаратно-независимых пикселей."
"Если для метатега viewport установить значение width=device-width, ширина страницы выбирается в соответствии с размером экрана устройства в аппаратно-независимых пикселях."
"Атрибут initial-scale=1 заставит браузер установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства."
В итоге они утверждают, что при width=device-width (я это имел ввиду когда писал про initial-scale но перепутал) мы будем работать с аппаратно независимыми пикселями, которые по сути являются результатом деления аппаратных пикселей на аспект ратио.
Если у вас на планшете работает по другому, то придется мне провести дополнительные тесты видимо ((
А на гугл планшетах браузеры позволяют в настройках масштабировать страницу?
Если нет - то можно благополучно думаю забить на этот аспект ратио и запретить масштабирование текста.

[Mr Crabbz]

Алексей Струков: Нет, вы всё правильно расписали ). Просто device-width у моего планшета - 640. Всё правильно.

В любом случае масштабировать текст отдельно от всего остального - чревато проблемами.

[Алексей Струков]

Роман Краббз: Теперь осталось найти лучший способ для запрета)
Какой способ посоветуете?
Я пока вижу вариант указать фонт сайз в пикселях(16 например для десктопа и возможно 12 для телефонов) в боди вместо фонт сайз 100%

[Mr Crabbz]

Алексей Струков: Ну дело такого рода, что 100% - это и есть 16 пикселей во всех нормальных браузерах независимо от устройства (вроде бы как, не уверен).
Сейчас всякие крутые версталы практикуют фишку с rem:

делаем для html { font-size: 62.5% } - это будет 10 пикселей. И далее все размеры указывать в rem. В данном случае 1 rem будет равен 10px. Ну и далее, например, заголовок h1 = 2rem, h2 = 1.5rem, h3 = 1 rem и т.п.

Потом в нужном media (например, для айфона) указываем:
media all and (max-wi....)........... {
html {
font-size: 82.5%;
}
}

И всё - во всех остальных элементах все размеры увеличатся пропорционально на 20%.

[Алексей Струков]

Роман Краббз: насколько я знаю все немного не так.
У браузера существуют свои стили по умолчанию для элементов и стили пользователя, которые имеют приоритет над браузерными стилями, но слабее стилей автора сайта. Когда пользователь увеличивает шрифт то его стиль оверрайдит браузерный стиль для шрифта (16 px обычно). Потом наш стиль оверрайдит стиль пользователя и если мы указали свой стиль в процентах, то эти проценты будут вычислены от размера указанного пользователем. Все эти версталы кто указывает шрифт в процентах хотят сохранить для пользователя возможность меня размер шрифта на самом деле, ибо так рекомендуется делать. Если мы укажем размер шрифта в пикселях то наш стиль будет переписывать всегда стиль пользователя и он не сможет менять размер шрифта, а rem это просто размер, который вычисляется относительно размера шрифта заданного для корневого элемента документа.

[Mr Crabbz]

Черт знает, я обычно вырубаю масштабирование всё таки. И всё хорошо:

< meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" >

[Mr Crabbz]

Алексей Струков: И при этом ПК-шные браузеры разрешают масштабирование по CTRL+колесо, увеличивая всё равномерно и пропорционально. А на мобильных - всё залочено)

[Алексей Струков]

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

[Алексей Струков]

Роман Краббз: этот момент надо будет протестировать. Возможно десктопные браузеры не обращают внимания на этот запрет.

[Алексей Струков]

Роман Краббз: погуглил, действительно десктопы не обращают внимания на запрет масштабирования в метатеге. Поэтому возможно они позволят масштабировать отдельно текст если в настройках это у браузера включить. Я смотрел как это выглядит - зрелище не из приятных). Скорее всего это пережиток прошлого, когда все сайты состояли из текста и табличек, то ничего страшного не случалось от этого шрифтового масштабирования. А сейчас на мой взгляд эта возможность не нужна, когда у нас есть ее аналог полного масштабирования, который работает намного лучше и предоставляет пользователю ту же возможность увеличения текста в разумных пределах, но с сохранением разметки. Единственное обьяснение почему это до сих пор пождерживают, по моему - слепое копирование методичек прошлого в новых руководствах.

Answer 2

[Денис Букреев]

С тем же успехом можно сходить с ума, думая о том, что пользователи могут нецелесообразно менять размеры окна браузера, ломая некоторые конструкции верстки

Comments

[Алексей Струков]

Если верстка ломается, то это значит что создатель верстки не предусмотрел этот вариант)
Я хочу это предусмотреть и радикально отсечь такую возможность)

[Mr Crabbz]

Алексей Струков: Хорошая адаптивная вёрстка учтёт этот момент (с ресайзом окон)

[Денис Букреев]

Роман Краббз: а если, например, лендинг, у которого высота каждого экрана равна высоте окна браузера?
вот тут то и идет плохое отображение сайта из-за действий пользователя
и печься об этом - полный идиотизм)

[Mr Crabbz]

Денис Букреев: Это скорее частный случай. Не так уж и много бывает таких задач. Во всяком случае, у меня точно)