При открытии сайта с мобильного устройства размера шрифта больше чем другие элементы, как починить?

Question

[boxxxer]

С компьютера все отображается идеально, а с телефона текст внизу страницы более крупный чем текст на всем сайте (хотя на том тексте, который крупный стоят стили font-size: 12px). Я то понимаю, что браузер это делает умышленно, но как это поправить?

Comments

[Роман]

вы бы сайт показали, тогда точнее сказать можно

Answer 1

[Роман]

1) Как правильно написал Денис Инешин вначале использовать так называемые Reset.CSS для того чтобы сбросить стили.
Каждый браузер использует своё собственное форматирование элементов и ресет поможет подогнать все базовые элементы к одному виду.
2) Использовать для шрифтов em вместо px. em подразумевает использование стандартного размера шрифта выбранного для системы. Довольно универсальное решение.

font-size: 1em; 
/* 100% размер шрифта. Если у пользователя это 12 px, то и будет выбрано это же значение.*/
font-size: 0.5em; /* уменьшит шрифт на 50% от базового для системы */

Comments

[Денис Инешин]

1) Нет нет, прошу не путать normalize.css и reset.css. Это совершенно разные вещи. Normalize.css ничего не сбрасывает на 0, а приводит все стили к одинаковому виду по умолчанию. Это гораздо лучше чем reset.css

[Роман]

Денис Инешин: Хмм... да, каюсь, не угледел беглым взглядом.) Не доводилось работать с этим нормалайзом.
Это какая-то новая мода? Мне привычней ресетать.

[Евгений Петров]

Роман: Уже не комильфо использовать решение начала 2000-х годов. Многое, что тогда казалось нормой, воспринимается как ужас в настоящее время.

[Денис Инешин]

Роман: забудьте вообще про reset.css как про страшный сон.

[Евгений Петров]

em подразумевает использование стандартного размера шрифта выбранного для системы

Неверно в принципе — em означает наследование размера шрифта от родительского элемента Равносильно использованию процентов.

В браузере нет понятия системы — есть размер в px, передаваемый в rem — корневой элемент html.
А дальше на мобильных устройствах идёт работа с viewport, зависящая от meta#viewport, в результате чего актуальный размер может иметь другое значение.

Answer 2

[kn1ght_t]

-webkit-text-size-adjust: 100%;
* {max-height: 999999px;}

Comments

[boxxxer]

прописал для дива в котором тект и для всех элементов * не сработало

Answer 3

[Александр Миранович]

habrahabr.ru/post/133465

Answer 4

[whunter]

Для кроссбраузерных решений лучше не использовать px в размерах шрифта, т.к. он абсолютный. Попробуйте альтернативные единицы, из вариантов: em, vmin.. остальное легко гуглиться по запросу adaptive font size in web design. Я использую vh/vw для адаптивной верстки.

Comments

[Евгений Петров]

Размер в px не может быть абсолютным.

Answer 5

[Денис Инешин]

Использовать normalize.css

Comments

[boxxxer]

не помогло

Answer 6

[Div-p]

Можно тегам в стиле прописать размер шрифта, тогда все Ваши теги буду всегда иметь одно свойство.
.p {font-size: 12px}

Comments

[boxxxer]

так и написал, но не помогает

[Div-p]

boxxxer: Может Вы просто другие параметры дали других тегам, это надо глянуть.... А так как вообще возможно ответить на этот вопрос если не видишь что изменяется.