添加填充时,移动设备上的边缘会极大地减小字体大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了添加填充时,移动设备上的边缘会极大地减小字体大小相关的知识,希望对你有一定的参考价值。

我正在尝试优化移动设备的网站,并在Windows 10 Mobile上的Edge中偶然发现了这个奇怪的问题:

当我使用除了全边框边框/边距/无填充框之外的任何东西时,字体大小会大大减少。请参阅以下最小示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Edge Test</title>
</head>
<body>
    <div>
        <h1>Without padding</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum.</p>
    </div>

    <div style="padding: 1em">
        <h1>With padding</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum.</p>
    </div>
</body>
</html>

这就是它在我的手机上看起来的边缘:

enter image description here

如果我设置边距或边框而不是填充或将宽度设置为除100%auto以外的任何值,也会发生同样的情况。

我想这是边缘的一个错误(我使用的是版本25.10586.318.0)?或者是出于某种奇怪的原因预期的行为? 无论哪种方式,有没有办法避免文本缩减,而不必设置固定的字体大小?

答案

在文档的head部分添加以下两行:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

以上是关于添加填充时,移动设备上的边缘会极大地减小字体大小的主要内容,如果未能解决你的问题,请参考以下文章

iPhone 6s plus 上的字体大小

CSS / Bootstrap - 字体大小未正确从计算机调整到移动设备:移动设备上的字体看起来很小

移动设备的 CSS 字体大小

WPF 自动调整字体大小,直到它适合父控件

使用 UIPageControl 减小点大小或填充以适应屏幕上的所有页面指示器

冲积地块中的小值,其中减小字体大小似乎不是解决方案