类似地未链接的 CSS 更改了 chrome 上 window.innerWidth 和 window.innerHeight 的影响值

问题描述 投票：0回答：1

在计算机上的常规 chrome 页面上一切正常，但一旦我切换设备工具栏并从 iphone 12 预览我的网站（任何处于纵向模式的设备都可以），window.innerWidth 和 window 给出的值.innerHeight（尽管比例正确）大于预期分辨率，奇怪的是，这种情况在横向模式的设备（例如 Nest Hub）上不会发生，但当我返回预览时，在纵向模式下也能正常工作我的网站位于普通的 Chrome 窗口上。

这是重现该错误的最小 HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            font-family: "Helvetica";
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        input {
            z-index: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0;
            background: none;
            outline: none;
            border: none;
            color: white;
            font-size: 48px;
            font-weight: bolder;
            text-align: center;
            transform: translateX(-50%) translateY(-50%);
            mix-blend-mode: difference;
        }

        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0%;
            margin: 0%;
            z-index: -1;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <input id="input" value="Hello, World!"></input>
    <script>
        let canvas = document.getElementById('canvas');
        // set canvas resolution
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        console.log(window.innerWidth, window.innerHeight);
        // fill canvas with black
        let ctx = canvas.getContext('2d');
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    </script>
</body>
</html>

由于某些原因，删除 

font-size: 48px
行可以解决该问题；为什么一些 CSS 会影响 javascript 的东西？在 Firefox 中不会发生这种情况，并且始终给出正确的值，尽管您仍然可以在页面中滚动，就像在 chrome 中创建的更大画布上一样。

javascript html css html5-canvas
1个回答
0
投票

这里的问题与当 

body
元素溢出时浏览器计算这些值的方式不同有关，即使它的样式为 
hidden
。删除 
font-size: 48px
规则可以解决问题的原因是，为文本设置 absolute 大小会导致 
input
元素变得比 body 元素在您正在测试的设备尺寸上所容纳的空间更宽，这似乎让 Chrome 感到困惑。如果您在平板电脑等足够大的设备上检查纵向模式，您会看到记录的准确值。无论出于何种原因，Firefox 在计算 innerWidth 和 innerHeight 时都能够忽略窗口外部的溢出，但 Chrome 却很困难。 （奇怪的是，Chrome报告的宽度仍然小于溢出元素的宽度...）

一种解决方案是更改 CSS，为文本使用 relative 大小，例如 

em
。在这种情况下，输入不会溢出 
body
，Chrome 也没有问题。然而，由于是相对的，这意味着文本将随着屏幕尺寸而缩放，这可能是也可能不是期望的行为。如果您绝对需要以绝对大小显示文本，您可能需要查看 this 关于 Chrome 对 
window
大小感到奇怪的另一个问题的答案，并尝试使用不同的方法来获取视口尺寸。

TL;DR 使用 

px
而不是 % 或 
em
之类的东西会导致 body 元素溢出。尝试更改为相对文本大小，如果这不起作用或不现实，您可能必须依靠不同的方法来确定屏幕大小。

我希望这些解决方案之一能有所帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.