我在一个项目上使用 Twitter Bootstrap。除了默认的引导样式,我还添加了一些我自己的
//My styles @media (max-width: 767px) { //CSS here }
当视口的宽度小于 767px 时,我还使用 jQuery 更改页面上某些元素的顺序。
$(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } }
我遇到的问题是$(window).width()CSS计算的宽度和CSS计算的宽度似乎不一样。当$(window).width()返回 767 时,css 将其视口宽度计算为 751,因此似乎有 16px 的差异。
$(window).width()
有谁知道是什么原因造成的以及我该如何解决这个问题?人们建议不考虑滚动条的宽度,而使用$(window).innerWidth() < 751是要走的路。但是理想情况下,我想找到一个计算滚动条宽度并且与我的媒体查询一致的解决方案(例如,两个条件都检查值 767)。因为肯定不是所有的浏览器都有 16px 的滚动条宽度?
$(window).innerWidth() < 751
如果您不必支持 IE9,您可以使用window.matchMedia()(MDN 文档)。
window.matchMedia()
function checkPosition() { if (window.matchMedia('(max-width: 767px)').matches) { //... } else { //... } }
window.matchMedia与 CSS 媒体查询完全一致,浏览器支持相当不错:http ://caniuse.com/#feat=matchmedia
window.matchMedia
如果你必须支持更多的浏览器,你可以使用Modernizr 的 mq 方法,它支持所有能够理解 CSS 中媒体查询的浏览器。
if (Modernizr.mq('(max-width: 767px)')) { //... } else { //... }