window.innerWidth 根据浏览器给出不同的大小答案

【问题标题】：window.innerWidth is giving different sizes depending on browserwindow.innerWidth 根据浏览器给出不同的大小
【发布时间】：2018-10-01 16:36:30
【问题描述】：

我有一个问题，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 显示的是实际的 500 像素。

【问题讨论】：

标签： html dom cross-browser

【解决方案1】：

来自CSS: The Definitive Guide: Visual Presentation for the Web讨论绝对长度单位（in,cm,mm,q,pt,pc,px）：

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

【讨论】：