JS中的window.innerWidth在css中不等于`width：100％`

Question

我正在手机上创建一个网页，它可以适应100％的屏幕宽度。

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

width: 100%将这些元素设置为375像素，我认为是正确的，因为屏幕分辨率为1334 x 750.但window.innerWidth为488像素，无论出于何种原因，我真的不喜欢理解。

这是我正在测试的浏览器的错误，还是我想念视网膜屏幕？

顺便说一句，我使用width:480px;max-width:100%来设置静态元素。 view-port meta类似于<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');
  }