如何检测响应式网页设计的屏幕尺寸？

Question

我用Google搜索了一下quirksmode site，它可以为您提供屏幕尺寸。拉起控制台我发现窗口对象可以直接使用screen.width和screen.height。

我想在纯JavaScript中进行检测才能开始使用。我可以在所有设备和浏览器中使用此属性 - 移动设备，平板电脑，PC和Chrome，Safari，IE，Firefox。

由于重新调整大小等原因，我并不关心视口的变化。只是屏幕的实际尺寸没有变化。

我希望有一个属性我可以在设备和浏览器之间查看。

以下是wikipedia on responsive web design.

的一般信息

Answer 1

查看Get the device width in javascript

媒体查询也适用于js：

if (window.matchMedia('screen and (max-width: 768px)').matches) {}

另一种方式是：

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

Answer 2

screen.width是您正在寻找的财产。

Answer 3

这是我很长一段时间的预感。 下面的这些属性根据新标签的大小提供响应大小。

window.innerWidth
window.innerHeight