这是我的代码，请在chrome devtool中打开并打开手机模拟器:
* {
padding: 0;
margin: 0;
}
body,
html {
height: 100%;
width: 100%;
}
#app {
height: 100%;
background-color: lightcyan;
}
#wrapper {
overflow: auto;
background-color: lightblue;
}
div {
font-size: 24px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=750,maximum-scale=1.2,user-scalable=no">
<title>Title</title>
</head>
<body>
<div id="app">
<div>Test font sizeTest font size</div>
<div>Test font sizeTest font size</div>
<div>Test font sizeTest font size</div>
<div>Test font sizeTest font size</div>
<div>Test font sizeTest font size</div>
<div id="wrapper">
<div>Test font sizeTest font size</div>
<div>Test font sizeTest font size</div>
<div>Test font sizeTest font size</div>
<div>Test font sizeTest font size</div>
<div>Test font sizeTest font size</div>
</div>
</div>
</body>
</html>
一个字体在一页里有两种外观，很奇怪。 我发现有一些方法可以使字体大小表现相同:
- 从
#app中删除样式height:100% - 删除一些 div 元素(例如在
app中的 div 中保留两个，在wrapper中保留两个 div) - 将
viewport的width属性更改为device-width - 删除
#wrapper上的样式overflow
但这些方式无法解释我的问题。
最佳答案
TL;DR:某些移动浏览器(和 Chrome 检查器)会在认为可以安全地自动缩放文本时自动缩放文本。 overflow:auto; 就是其中之一。要防止这种行为，请使用 -webkit-text-size-adjust: 100%;
根据drafts.csswg.org :
One common problem with this type of interaction occurs when the user wants to read a large block of text. It might be that a block of text within this desktop-formatted page might be laid out so that when the user zooms in so that the text is large enough to read, each line of text is wider than the display on the small device. This means the user needs to scroll side to side to read each line of text, which is a serious inconvenience to the user.
One way for software that displays Web pages or other CSS-formatted content on a mobile device is to make some of the text larger so that this problem does not occur. The goal of this enlargement is to make the text big enough so that when the block it is in is scaled to the width of the display, the text is large enough to read. At the same time, this needs to be done with minimal disruption to the overall design of the page.
Mozilla also explains移动端文字大小调整:
Because many web pages have not been developed with mobile in mind, smartphone browsers differ from desktop browsers in the way they display web pages. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually 800 or 1000 pixels wide. To map the wide layout back to the original device size, the browser either shows only part of the whole render, or the viewport is scaled down to fit.
Because text that has been scaled down to fit a small screen is very small, many mobile browsers apply a text inflation algorithm to make the text larger and more readable. When an element containing text uses 100% of the screen's width, its text size is increased until it reached a readable size, but without modifying the layout.
According to Mozilla , overflow: auto; 建立一个新的 block 格式化上下文:
The overflow CSS property specifies whether to clip content, show scrollbars, or display overflowing content when it is too large for its block-level container.
由于 overflow:auto; 正在突破其父上下文，因此某些移动浏览器(显然还有 Chrome 的网络检查器)可以自由应用移动文本大小调整。这种行为can be通过使用禁用:
body, html {
-webkit-text-size-adjust: 100%;
}
#app div 及其子级(带有溢出的 #wrapper div 除外)从视口(viewport)元继承 750px 宽度。
关于html - 一页中的元素并设置一种字体大小但显示不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45625894/