为什么字体大小会根据移动设备的纵向或横向而变化？

Question

我正在使用px字体大小，这可能与它有关。

然而，肖像我的字体大小是一个很好的阅读尺寸：

但横向字体大小太大了。 这是iPhone 6+屏幕

解决此问题的最佳方法是纵向和横向模式的媒体查询吗？

Answer 1

在CSS文件中设置text-size-adjust属性，如下所示：

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust的更多信息。

Answer 2

正如汤姆所说，字体大小没有改变，你的视口是。这可以使用视口元标记更改，但这将更改整个页面。如果您只想更改特定的文本项，则媒体查询要好得多。

我在下面添加了风景iphone和肖像iphone尺寸供您参考，并使用h1标题作为示例风格。

    /*iphone landscape*/
    @media all and (min-width:321px) and (max-width:480px) { 
        h1 {
            font-size:18px;
        }
    }

    /*iphone portrait and below*/
    @media all and (max-width:320px)  {
        h1 {
            font-size:16px;
        }
    }