我想知道为什么$(window).width()
在浏览器标准和设备仿真模式下使用时会有所不同。
当我$(window).width()
在宽度为 1024px 的浏览器上使用时,我在标准模式下得到了 1007 的值,但在设备仿真模式下使用它时,我得到了准确的 1024。
那么两者之间有什么区别,无论如何要检查在正常窗口模式和设备仿真模式下准确的特定宽度?
我现在使用的是$(window).width()
检查窗口大小,所以无论如何要检查这个旁边的实际大小?
我想知道为什么$(window).width()
在浏览器标准和设备仿真模式下使用时会有所不同。
当我$(window).width()
在宽度为 1024px 的浏览器上使用时,我在标准模式下得到了 1007 的值,但在设备仿真模式下使用它时,我得到了准确的 1024。
那么两者之间有什么区别,无论如何要检查在正常窗口模式和设备仿真模式下准确的特定宽度?
我现在使用的是$(window).width()
检查窗口大小,所以无论如何要检查这个旁边的实际大小?
不同之处在于浏览器的滚动条。在所有浏览器的最新版本(http://www.textfixer.com/tutorials/browser-scrollbar-width.php)中,滚动条宽度为 17px,如果将其添加到 1007,您将得到 1024px。
该度量是正确的,因为它指的是浏览器中“可用于”呈现内容的区域——返回浏览器全宽是不正确的。
尝试检查位置,例如,
function checkPosition() {
if (window.matchMedia('(min-width: 1024px)').matches) {
//...
} else {
//...
}
}
或者,您可以使用modernizr mq方法,例如,
if (Modernizr.mq('(min-width: 1024px)')) {
//...
} else {
//...
}