HTML文本在移动视图上基于字符数被重新格式化



我有一些html,它的字体大小根据它是否在正文中超过或低于一定数量的字符而放大或缩小。

<html><head>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Donec bibendum nunc leo, quis placerat nisl euismod ac. 
Aenean et nisi malesuada malesuada malesuada malesuada
malesuada malesuada malesuada malesuada malesuada 
</div>
</body></html>

如果你打开这个chrome浏览器,并切换到移动视图,文本是非常小的。下面是一个图片,以防你觉得不一样:https://i.ibb.co/R6Fbmtp/small.png

然而,如果你在文本中添加一个字符并再次查看它,突然文本变得更大,更容易阅读,另一个图像:https://i.ibb.co/5cN1Sgb/large.png

谁能解释一下为什么会发生这种情况?甚至不需要应用任何样式或断点来实现这一点。

对于遇到同样问题的人,解决方案是上面的html不包含设置viewport属性的标记,如下所述:https://www.w3schools.com/css/css_rwd_viewport.asp

内容长度的断点对元素缩放方式的影响似乎无关紧要,因为所有的网站都应该有上面的标签(如果他们将在移动设备上观看)。

最新更新