html-为什么相同的字体大小在不同的视图中会有奇怪的差异？-堆栈溢出

顺晟科技

2022-10-19 13:47:16

我有一个2个HTMLs，第一个有viewport标记，它在注释中，第二个没有:`

<html>
<head>
 <meta charset="utf-8" />
   <title>Civil War History</title>  
 <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> it is in the first -->
   <link href="cssfile.css" rel="stylesheet" />
</head>
<body>
  <div> Large Lorem ipsum dolor sit amet,
     consectetur adipisicing elit. Asperiores
     at deleniti exercitationem expedita laboriosam
     laborum laudantium tempora ullam.
     Delectus deserunt ducimus error esse
     incidunt minus necessitatibus nihil,
     obcaecati quaerat recusandae?
</div>
</body>
</html>`

htmls的CSSFILE相同（无更改）:

<html>
<head>
 <meta charset="utf-8" />
   <title>Civil War History</title>  
 <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> it is in the first -->
   <link href="cssfile.css" rel="stylesheet" />
</head>
<body>
  <div> Large Lorem ipsum dolor sit amet,
     consectetur adipisicing elit. Asperiores
     at deleniti exercitationem expedita laboriosam
     laborum laudantium tempora ullam.
     Delectus deserunt ducimus error esse
     incidunt minus necessitatibus nihil,
     obcaecati quaerat recusandae?
</div>
</body>
</html>`

当我在Iphone X的视区查看时，这两个行为都很奇怪。第一个带有viewport的标签有375px的尺寸和16px的字体大小，比第二个没有viewport的标签有980 px宽和16 px的字体大小的标签有更多的单词。怎么会呢？不是空间越大，字就越多吗？请解释一下正在发生的事情。提前感谢）

顺晟科技：

浏览器使用文本膨胀算法，从而导致这种影响。默认情况下，当文本字体太小时，此算法会在一些小宽度设备中的可触摸锚中放大文本字体大小。

为了防止这种使用：.

上一篇：JavaScript-ng-clic 下一篇：html-删除按钮顶部和底部的间距-

网站建设

Html

html-为什么相同的字体大小在不同的视图中会有奇怪的差异？-堆栈溢出