我意识到在获得设备尺寸等方面之前已经提出了类似的问题,但是对于确切的方法似乎存在分歧.
假设我有媒体查询(例如Twitter Bootstrap)
超小型设备电话(<768px) 小型设备平板电脑(≥768px) 中型设备台式机(≥992px) 大型设备台式机(≥1200px) 现在,我希望能够使用Javascript基本上获得相同的输出.换句话说,css媒体查询像素数而不是实际的网点.即我不需要得到确切的答案,但我想避免因为我得到’屏幕点’而不是css像素而被一个因子或2或3.
我更关心的是移动设备 – 尤其是Android – 而不是桌面设备. screen.width对此可靠吗?还是jQuery(文档).width()?
(这是针对一个研究项目,虽然我知道基本上不可能检测平板电脑与手机,但我想了解人们使用的设备的大小.用户体验不会受到结果的影响.)
最佳答案
我最喜欢这样做的方式如下(jQuery):
原文链接:https://www.f2er.com/css/426943.htmlvar viewportWidth = $(window).width();
// Then create if statements and execute code accordingly...
if (viewportWidth <= 767) {
// execute code
} else if (viewportWidth >= 768) {
// execute this
}
您还可以在宽度之间执行视口代码,例如:
if (viewportWidth >= 768 && viewportWidth <= 991) {
//execute this
}
这将在视口介于768px和991px之间时执行代码…