JS中的window.innerWidth不等于css中的"width：100%"

Question

我正在移动设备上创建一个网页，它将适合100%的屏幕宽度。

然而，当我用JavaScript创建一些元素并将宽度设置为window.innerWidth时，它们将比在CSS中设置width: 100%的静态元素宽得多。（在iPhone 6上）

width: 100%将这些元素设置为375px，我认为这是正确的，因为屏幕分辨率是1334 x 750。然而，window.innerWidth是488px，不管出于什么原因，我真的不明白。

这是我正在测试的浏览器的一个错误，还是我错过了视网膜屏幕的一些东西？

顺便说一下，我使用width:480px;max-width:100%来设置静态元素。视图端口元与<meta name="viewport" content="width=device-width, initial-scale=1.0"> 类似

Answer 1

像素比率和边条可能会导致窗口的内部宽度因设备而异。如果您需要在javascript中检查窗口宽度，以便媒体查询匹配。使用window.matchmedia函数。

JS-

  if ( window.matchMedia('max-width:800').matches ){
        console.log('tablet mode');
  }