Question

在使我的一个Web应用程序具有响应能力时，我遇到了一个非常奇怪的问题。 在全屏切换时，元素的字体大小变化非常大。我在Chrome DevTools仿真和实际移动设备上的Chrome中都发现了这个问题。

以下屏幕截图显示了问题所在。请注意，屏幕截图中的部分内容出于隐私目的进行了审查，但显示了所有重要部分。（窗口模式与全屏模式）
Screenshot in windowed mode Screenshot in fullscreen

应用于这些元素的所有CSS如下。如您所见，两种模式之间都没有CSS更改。然后为什么会发生这种情况以及如何阻止它？
我也查看了计算样式，它也保持不变。窗口模式和全屏模式的计算样式均为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。

手机全屏字体大小变化

1 个答案: