添加填充时,移动设备上的边缘会极大地减小字体大小
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>
这就是它在我的手机上看起来的边缘:
如果我设置边距或边框而不是填充或将宽度设置为除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">
以上是关于添加填充时,移动设备上的边缘会极大地减小字体大小的主要内容,如果未能解决你的问题,请参考以下文章
CSS / Bootstrap - 字体大小未正确从计算机调整到移动设备:移动设备上的字体看起来很小