Question

我有一个问题，即JavaScript变量window.innerWidth根据浏览器提供不同的大小。如果全屏显示，Firefox会向我1847，Opera 1364和Chrome 1412。我可以理解几个像素，但不是这么多。

所以我做了一些测试，发现500px在所有浏览器中的宽度都不一样...最简单的html会产生3种不同的结果：

<!doctype html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body style="padding: 0; margin: 0">
    <div style="height: 20px; width: 500px; background: red;"></div>
</body>
</html>

为什么会发生这种情况的任何想法？我当然确保我没有放大任何浏览器。一切都设定为100％。如果我测量屏幕截图，Firefox会显示实际的500px。

Answer 1

从CSS: The Definitive Guide: Visual Presentation for the Web讨论绝对长度单位(in,cm,mm,q,pt,pc,px)：

<块引用>

只有当浏览器知道显示页面的屏幕、您使用的打印机或任何其他可能应用的用户代理的所有细节时，这些单元才真正有用。在 Web 浏览器上，显示受屏幕大小和屏幕设置分辨率的影响——作为作者，您对这些因素无能为力。您只能希望，如果不出意外，测量结果将彼此一致

window.innerWidth根据浏览器提供不同的大小

1 个答案: