我现在正在设置网站的移动端,我需要自定义 CSS 和 Javascript 用于移动设备,所以在 CSS 中我有使用规则@media screen and (max-width: 500px) {
,在 Javascript 中我将使用if ($(window).width() < 500
.
但是,如果我将浏览器的大小调整为移动 CSS 开始使用的确切像素,console.log($(window).width());
我得到 485。
这是正常行为还是我做错了什么?
更新:
使用它,这些值似乎是同步的,但目前仅在 Firefox 中进行了测试。
var scrollBarWidth = false;
function mobileRules() {
if (!scrollBarWidth) {
var widthWithScrollBars = $(window).width();
$('body').css('overflow', 'hidden');
var widthNoScrollBars = $(window).width();
$('body').css('overflow', 'scroll');
scrollBarWidth = widthNoScrollBars - widthWithScrollBars;
console.log('Width: '+widthWithScrollBars+'. Without: '+widthNoScrollBars+'. Scroll: '+scrollBarWidth);
}
console.log($(window).width()+scrollBarWidth+' vs '+globals.mobile_width);
if ($(window).width()+scrollBarWidth < globals.mobile_width) {
console.log('Running mobile rules in jQuery');
}
}