javascript - 如何使用 Javascript 获取 'css-pixel'(媒体查询)宽度？

Question

我意识到在获取设备尺寸等方面之前也有人提出过类似的问题，但对于解决此问题的确切方法似乎存在分歧。

假设我有媒体查询(例如 Twitter Bootstrap)

超小型设备手机(<768 像素)

小型设备平板电脑(≥768 像素)

中型设备桌面(≥992px)

大型设备桌面(≥1200 像素)

现在，我希望能够使用 Javascript 从本质上获得相同的输出。换句话说，css media-query 像素数而不是实际的屏幕点。也就是说，我不需要得到确切的答案，但我想避免因为我得到的是“屏幕点”而不是 css 像素而出局 2 或 3。

与台式机相比，我更关心移动设备，尤其是 Android。 screen.width 对此可靠吗？还是 jQuery(document).width()？

(这是一个研究元素，虽然我知道检测平板电脑与手机基本上是不可能的，但我想了解人们使用的设备的大小。用户体验不会受到限制根据结果​​。)

Answer 1

我最喜欢的做法如下 (jQuery):

var viewportWidth = $(window).width();
// Then  create if statements and execute code accordingly... 
if (viewportWidth <= 767) {
           // execute code
} else if (viewportWidth >= 768) {
           // execute this
}

您还可以为宽度之间的视口(viewport)执行代码，例如:

if (viewportWidth >= 768 && viewportWidth <= 991) {
   //execute this
}

这将在视口(viewport)介于 768px 和 991px 之间时执行代码...