1

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

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

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

这是我正在测试的浏览器的错误，还是我错过了视网膜屏幕的某些内容？

顺便说一句，我width:480px;max-width:100%用来设置静态元素。视口元就像<meta name="viewport" content="width=device-width, initial-scale=1.0">

4

1 回答 1

0

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

JS

  if ( window.matchMedia('max-width:800').matches ){
        console.log('tablet mode');
  }
于 2015-11-20T03:08:32.800 回答