Question

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

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

-webkit-text-size-adjust：none;

（注意：在其他帖子中，我也看过＆＃39; 100％＆＃39;而不是＆＃39;无＆＃39;，这可能更合适，但这里的区别似乎无关紧要。）

因此，我的主要问题是，为什么当我在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>

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

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

感谢。

Answer 1

看来这个解决方案是正确的......但根据Mozilla，它仍然是实验性的。

这些是您可以尝试的全套值，但开发人员仍在努力使移动算法正确无法解决问题。也许其他一个值对你来说会更好。

/* Text is never inflated */
text-size-adjust: none;

/* Text may be inflated */
text-size-adjust: auto;

/* Text may be inflated in this exact proportion */
text-size-adjust: 80%;

/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

您可以在此处找到更多信息。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

CSS：在iPhone上禁用字体大小的自动重新缩放

1 个答案: