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

Question

我用谷歌搜索并得到一个 quirksmode site给你你的屏幕尺寸。拉起控制台，我看到 screen.width 和 screen.height 可以直接从 window 对象获得。

我想开始使用纯 JavaScript 进行检测。我可以在所有设备和浏览器(手机、平板电脑、PC 和 Chrome、Safari、IE、Firefox)上使用此属性吗？

我不关心视口(viewport)因调整大小等而发生变化。只关心屏幕的实际大小不会改变。

我希望有一个属性可以跨设备和浏览器检查。

这是 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);