Как обеспечить нормальное отображение шрифтов на сайте с фиксированной шириной в мобильных устройствах?

Question

[Алёна]

С адаптацией сайтов под мобильные сталкивалась, не было никаких проблем. Возникла задача сделать сайт фиксированной ширины, и появились вопросы по поводу шрифтов.

Такая проблема: размер шрифта на странице задан в px, я не хочу, чтобы он как-то масштабировался на мобильных, только при желании пользователя при самостоятельном увеличении страницы на экране. Но на 7" планшете Андроид, например, происходит следующее:


Это вид с планшета. Панель позиционируется абсолютно, шрифт увеличился, верстка съехала.
Хотя указан шрифт 16px, панель должна располагаться под текстом, но здесь он занял больше высоты, чем рассчитано. Всё остальное, как ни странно, масштабируется нормально.

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

Answer 1

[Юрий Лобанов]

Возможно конкретно на этом устройстве настройки масштаба шрифта изменены. А Вы стили сбрасываете?

Comments

[Алёна]

Посмотрела настройки, да, вы правы. На устройстве задано. Получается, с этим никак не справиться? Либо решать как-то через js?

[Юрий Лобанов]

@pandaWarrior никак. Можно бороться так - не указывать ничего в абсолютных единицах. Но Вы рискуете, что верстка поедет все равно.
Запретить пользователю изменить шрифт Вы не можете - это противоречит концепции доступности информации. Слабовидящие пользователи должны иметь такую возможность.
Верстать надо так, чтобы при увеличенном шрифте сайт был читаем. Если поедет немного верстка - то это не критично.

[Юрий Лобанов]

@pandaWarrior и если я прав - вопрос надо отметить решенным.

Answer 2

[Константин Величко]

Добавьте в head

<meta name="viewport" content="width=device-width,minimum-scale=1.0"/>

Comments

[Юрий Лобанов]

@Zoxon на шрифт это никак не повлияет.

[Константин Величко]

@iiil У меня таких проблемм никогда не возникало, но в этой статье говорится обратное habrahabr.ru/post/214559

[Юрий Лобанов]

@Zoxon Почитайте комментарии у моему ответу. У человека на девайсе настроен масштаб шрифта. Я сам с таким столкнулся, почему-то у моего приятеля была настройка шрифта 115%, я спросил его - он говорит, что так было у него с самого начала.
От этого никаким viewport не спастись, точно также, как Вы не сможете запретить масштабировать сайт в браузере (в ff Вид - Масштаб - Только текст). А за запрет масштаба страницы в телефоне тоже по рукам надо бить. На всякий случай, я вижу, что Вы этого не предлагает, просто заодно решил уточнить. Если кто-то хочет смотреть страницу с увеличенным шрифтом или масштабом - это проблема верстальщика: он или плюет на таких пользователей, или делает так, чтобы у них все читалось.

[Юрий Лобанов]

@Zoxon за ссылку спасибо, если столкнусь - кучу времени сэкономит.