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

Question

我用Google搜索了一个quirksmode网站,它可以为您提供屏幕尺寸.拉起控制台我看到了,screen.width并且screen.height可以从窗口对象直接获得.

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

我不关心由于重新调整大小等视图端口的变化.只是屏幕的实际大小不会改变.

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

以下是维基百科关于响应式网页设计的一些一般信息.

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 是您要寻找的财产。