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

我知道在获取设备尺寸等问题之前也曾提出过类似的问题，但是对于实现此目标的确切方法似乎存在分歧。

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

小型设备电话(
小型设备平板电脑(≥768px)

中型设备台式机(≥992px)

大型设备台式机(≥1200px)

现在，我希望能够使用Javascript本质上获得相同的输出。换句话说，css媒体查询像素数而不是实际的屏幕点数。即我不需要得到确切的答案，但我想避免被2或3倍的影响，因为我得到的是``屏幕点''而不是css像素。

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

(这是一个研究项目，虽然我知道基本上无法检测平板电脑还是手机，但我想指出人们正在使用的设备的大小。结果不会决定用户的体验。 )

最佳答案

我最喜欢的方法如下(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之间时，将执行代码。