对于响应式模板,我在CSS中有一个媒体查询:
@media screen and (max-width: 960px) { body{ /* something */ background:red; } }
而且,我在调整大小以记录宽度时做了一个jQuery函数:
$(window).resize(function() { console.log($(window).width()); console.log($(document).width()); /* same result */ /* something for my js navigation */ }
而且CSS检测和JS结果有所不同,我有这个meta:
<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>
我想这是由于滚动条(15像素)所致。我该如何做得更好?
您对滚动条是正确的,这是因为CSS使用的是设备宽度,而JS使用的是文档宽度。
您需要做的是在JS代码中测量视口宽度,而不是使用jQuery width函数。
function viewport() { var e = window, a = 'inner'; if (!('innerWidth' in window )) { a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; }