更改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 */
}