CSS：如何取消 Safari 上字体大小的自动重新缩放

Question

注意：我再次发布这个问题，只是稍作修改，因为第一次问题没有得到解决。较早的问题在这里找到：CSS: Disabling automatic rescaling of font-size on iPhone，但正如我所说，它几乎相同；不幸的是，它有一个答案对我来说并没有说明太多...]

正如所解释的 here，Apple iPhone（即 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 */
}

对于影响手机字体的样式sheet为了人们的视力，我只放了大于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 上字体大小的自动重新缩放

CSS: how to do away with automatic rescaling of font-size on Safari

css

safari

portrait

font-size