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

Question

我用谷歌搜索了这个并找到了一个 quirksmode 网站，它可以为你提供屏幕尺寸。 拉出控制台，我看到

screen.width

和

screen.height

可以直接从窗口对象获得。

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

我不关心由于重新调整大小等而导致的视口变化。只关心屏幕的实际尺寸不会改变。

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

这里是 wikipedia 关于响应式网页设计的一些一般信息。

Answer 1

看一下在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

Answer 4

好吧，

screen.width

和

screen.height

将检测屏幕的宽度和高度，而不一定是用户浏览器的宽度/高度。因此，如果用户调整浏览器大小，这可能无法提供准确的读数。 https://developer.mozilla.org/en-US/docs/Web/API/Screen/width

另一种方法是使用

window.innerWidth

和

window.innerHeight

。无论设备/屏幕如何，这都会提供实际的浏览器宽度/高度。 https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

进行一些测试即可确定哪一个最适合您的要求。

您可能还想阅读有关布局视口的内容 https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport

Answer 5

if (window.visualViewport.width <= 768) {
  console.log('responsive')
}