Question

注意：我正在重新发布此问题，稍作修改，因为第一次问题没有得到解决。先前的问题可以在这里找到：CSS: Disabling automatic rescaling of font-size on iPhone，但正如我所说，它几乎相同;它有一个答案，遗憾的是没有为我澄清太多......]

正如here所解释的那样，Apple视频（即Safari）在视口改变时（即从纵向到横向，反之亦然）重新缩放字体大小。

该问题的接受答案是，为了禁用此行为，应添加：

-webkit-text-size-adjust: none;

因此，我的主要问题是，为什么当我在iPhone上查看以下HTML测试文件时，与纵向视图相比，固定大小的字体在横向上呈现更大的颜色：

<!doctype html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>Untitled Document</title> 
        <style> 
            p { 
              font-size:24px;
             -webkit-text-size-adjust:none;
             } 
        </style> 
    </head>
    <body> 
        <p>This is an example text</p> 
    </body>     
</html>

（注意：在其他帖子中我也看到'100％'而不是'none'，这可能更好，但这种区别在这里似乎无关紧要，因为它们都不起作用。）

然而，我还想确认Apple iPhone - 以及可能还有其他Apple设备 - 是唯一能够显示这种（对我而言，令人烦恼）行为的设备......这是真的吗？

顺便说一句，我发现它很烦人，因为现在我无法在我的iPhone上正确测试，因为我知道我的网站（即字体大小）在其他移动设备上呈现的方式不同（我并不完全信任在线模拟器）。

感谢。

Answer 1

与你明显使用的字体大小有关，在这个网站上我使用以下css：

html, body
{
    font-size: 100%; /* equivalent to 16px */
}

对于影响移动字体的样式表我只为了人们视线而放置大于16px的尺寸，例如

 h2
{
  font-size:1.5rem; 
  /* notice the use of rem as compared to em - I don't use px for font sizes so I don't know about that */
}

http://www.awri.com.au/research_and_development/metabolomics_facility/

仅供参考我的元标记是：

<meta name="viewport" id="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />

CSS：如何在Safari上自动重新缩放font-size

1 个答案: