Сохранение шрифта одинакового размера при изменении ориентации iphone

Question

Я использую этот метатег

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

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

Почему это?

CSS (составлено из SASS):

.text {color: #dee3d5; font-size: 16px; font-family: Helvetica; font-weight: bold; }
@media screen and (orientation:portrait) {
  .text { margin-top: 10px; margin-bottom: 10px; line-height: 20px; } }
@media screen and (orientation:landscape) {
  .text { margin-top: 5px; margin-bottom: 5px; line-height: 16px; } }

#thanx { border-bottom: solid 2px #dee3d5; padding: 10px; margin: 0 10px 12px 10px; }

Answer 1

Вы можете отключить это поведение, используя -webkit-text-size-adjust: none;.

body {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}