手机全屏字体大小变化

Question

在让我的一个网络应用程序响应时，我遇到了一个非常奇怪的问题。 元素的字体大小在切换全屏时变化很大。我在 Chrome DevTools 仿真和真实手机上的 Chrome 中都发现了这个问题。

以下屏幕截图显示了问题所在。请注意，屏幕截图的部分内容为隐私而进行了审查，但显示了所有重要部分。（窗口模式与全屏模式）

应用于这些元素的所有 CSS 如下。如您所见，两种模式之间没有 CSS 发生变化。那么为什么会发生这种情况，我该如何阻止呢？
我还查看了 Computed Styles，它也保持不变。窗口和全屏模式的计算样式均为 16 像素，即相对单位不会混乱。

#a11y-controls button {
    border: none;
    border-radius: 0;
    border: 1px solid #555;
}
body.a11y button:focus {
    box-shadow: 0 0 0 2px inset #4c9aff;
    outline: none;
}
button:focus {
    border-color: white;
}
button:hover {
    background: #555;
}
button {
    font: inherit;
    font-size: 80%;
    background: #000;
    color: white;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
}
* {
    box-sizing: border-box;
}
user agent stylesheet
:focus {
    outline: -webkit-focus-ring-color auto 1px;
}
user agent stylesheet
button {
    appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
    box-sizing: border-box;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    border-radius: 2px;
}
@media (pointer: coarse)
#a11y-controls {
    height: 100px;
    bottom: -100px;
    font-size: 20px;
}
Style Attribute {
    pointer-events: all;
}
body {
    pointer-events: none;
    position: relative;
}
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color-scheme: dark light!important;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

全屏，

#a11y-controls button {
    border: none;
    border-radius: 0;
    border: 1px solid #555;
}
body.a11y button:focus {
    box-shadow: 0 0 0 2px inset #4c9aff;
    outline: none;
}
button:focus {
    border-color: white;
}
button:hover {
    background: #555;
}
button {
    font: inherit;
    font-size: 80%;
    background: #000;
    color: white;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
}
* {
    box-sizing: border-box;
}
user agent stylesheet
:focus {
    outline: -webkit-focus-ring-color auto 1px;
}
user agent stylesheet
button {
    appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
    box-sizing: border-box;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    border-radius: 2px;
}
@media (pointer: coarse)
#a11y-controls {
    height: 100px;
    bottom: -100px;
    font-size: 20px;
}
Style Attribute {
    pointer-events: all;
}
body {
    pointer-events: none;
    position: relative;
}
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color-scheme: dark light!important;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

为了您的满意，这就是用于处理切换全屏模式的所有 javascript。

function toggleShotMode() {
    if (document.fullscreenElement === null) {
        //!titleInShot.checked ? picTitle.style.opacity = 0 : picTitle.style.opacity = 1;
        document.documentElement.requestFullscreen();
    } else {
        //picTitle.style.opacity = 1;
        document.exitFullscreen();
    }
}

这里是 HTML，显示了经过审查但重要的部分。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="color-scheme" content="dark light">
    <link rel="stylesheet preload prefetch" href="https://fonts.googleapis.com/css2?family=Lato&display=swap" as="style">

    <link rel="stylesheet" href="./style.css">
    <link rel="manifest" href="./manifest.webmanifest">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="apple-touch-icon" href="./apple-touch-icon.png">
</head>

<body>

    <div id="a11y-controls">
        <button id="a11y-prev-pic">Previous Picture</button>
        <button id="a11y-shot-moder">Toggle "Shot-Mode"</button>
        <button id="a11y-settings-toggler">Open/Close Settings</button>
        <button id="a11y-next-pic">Next Picture</button>
    </div>

    <script src="script.js"></script>
</body>

</html>

Answer 1

编辑：经过一些经典的反复试验，结论终于浮出水面。

这里的罪魁祸首是缺少viewport meta tag。

基本示例： <meta name="viewport" content="width=device-width, initial-scale=1">

在没有规范的情况下，浏览器会尽力在移动屏幕上呈现更大的桌面视图，并且无意中忽略了移动 CSS。