代码之家 › 专栏 › 技术社区 › Holland

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

portrait font-size safari css

1

Holland · 技术社区 · 9 年前

注意:我再次发布这个问题,稍作修改,因为这个问题第一次没有得到解决。前面的问题可以在这里找到: 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%”而不是“无”,这可能更可取,但这里的区别似乎无关紧要,因为两者都不起作用。)

然而,我也想确认一下,苹果iPhone——可能还有其他苹果设备——是唯一显示这种(对我来说,令人讨厌的)行为的设备……这是真的吗?

顺便说一句,我觉得这很烦人,因为现在我无法在iPhone上正确测试,因为我知道我的网站(即字体大小)在其他移动设备上的呈现方式不同(而且我不完全信任在线模拟器)。

谢谢

1 回复 | 直到 7 年前

1

0

Carol McKay 9 年前

显然,这与你使用的字体大小有关,在这个网站上,我使用以下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" />