Что не так со шрифтами в мобильных браузерах (Safari)?

Question

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

Обратил внимание, что Safari на планшете и телефоне уменьшает размер шрифта примерно в полтора раза. Не совсем понятен принцип такого поведения. Может какой метатег потерял или еще что забыл указать?
На данный момент есть:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">

body {
  font: 300 16px/1.2 Roboto, #{$font_stack};
}

Answer 1

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

Используйте Normalize.css

Comments

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

Там, к сожалению, нет правил, которые могут помочь

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

Алексей Струков: А как же эта строка? -webkit-text-size-adjust: 100%; /* 2 */

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

Денис Инешин: Оно не работает. Точнее это какой то старый хак, который сейчас уже не актуален на современных браузерах. По крайней мере у меня он ни на что не влияет. Да и в комментарии к свойству внутри Normalize.css указано "Prevent adjustments of font size after orientation changes in IE and iOS", так что там оно призвано решать проблемы с изменением размера шрифта при повороте экрана.
Возможно я не достаточно корректно выразил проблему. Мне нужно понять почему допустим кнопка на экране телефона и на экране компьютера не совпадает размером. Теоретически в css-пикселях они должны быть равны, учитывая тот факт, что у меня прописано width=device-width

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

Алексей Струков: а, ну тут скорее всего все банально. Не нужно сравнивать пиксели и реальные сантиметры и миллиметры. Они везде разные, все зависит от разрешения экрана, размера зерна.

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

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

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

Алексей Струков: если выглядят слишком уж мелко, значит у вас не учитывается ретина. Читайте: https://habrahabr.ru/post/237931/

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

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