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

我使用的是

px

font size，这可能与此有关

但是，纵向字体大小是一个很好的阅读大小：

但是字体太大了。这是一个iPhone 6+屏幕

---

解决这一问题的最佳方法是对纵向和横向模式进行媒体查询吗

在CSS文件中设置文本大小调整属性，如下所示：

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

---

更多信息请访问。

正如tom所说，字体大小没有改变，您的视口正在改变。这可以使用viewport meta标记进行更改，但这将更改整个页面。如果您只想更改特定的文本项，那么媒体查询就更好了

我在下面添加了横向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;
        }
    }

---

字体大小不变，视口缩放不变。这就是为什么相同的字体看起来更小。尝试放大或缩小网页或图片，您将看到文本看起来会变大或变小。尝试使用viewport元标记。这应该是解决方案，我认为这是一个比“已经有答案”更好的答案，因为它涵盖了“moz”和“ms”供应商前缀属性。即使这个问题的状态是“iPhone”（因此意味着“Safari”浏览器和webkit），添加这些前缀也会增加一个安全级别，而不是其他答案。