对于响应式模板,我在我的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 content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport"/>
我想这是由于滚动条(15像素)。我怎么能做得更好?
对不起,如果这是一个重复的问题,但我不能找到我的错误在哪里。
解决方法
你对滚动条是正确的,这是因为CSS使用的是设备宽度,但JS使用的是文档宽度。
您需要做的是在JS代码中测量视口宽度,而不是使用jQuery宽度函数。
此代码是从http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
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' ] }; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。