javascript - 根据设备宽度改变样式

Question

元标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以上意味着移动设备或任何其他设备不会自动缩放我的网站，因此会按照我的意愿看到我的页面。

---

CSS 样式

/** Default Global CSS Styles are here. **/

@media screen and (max-width: 979px) {
    /** At this point, my top navigation is too big **/
    /** for the device width, therefore we switch   **/
    /** to the mobile version of the navigation.    **/
}
@media screen and (min-width: 650px) and (max-width: 979px) {
    /** As the width gets smaller the content gets  **/
    /** smaller so this is to resize even more.     **/
}
@media screen and (max-width: 649px) {
    /** This is the final, smallest width option    **/
    /** I currently have in place.                  **/
}

@media screen and (min-width: 980px) {
    /** This is the main, non-mobile website view   **/
}

---

JQuery

$(window).resize(function () {
    var PageWidth = $('body').innerWidth();
    if (PageWidth > 979) {
        $('#TopNavList').show();
    } else {
        $('#TopNavList').hide();
    }
    $('#TopNavList').children("li").removeClass("active");
});

由于我的页面上有 JQuery 的滑动和淡入淡出功能，这些功能在被激活时将内联 css 实现到我的页面。除了复制这些步骤之外，一切似乎都在正常工作:

1. 打开我的webpage
2. 慢慢改变宽度使其变小
3. 两个菜单之间没有任何显示。

我整个星期都在与这个问题作斗争，我个人认为这是由于某些浏览器媒体查询宽度读取内部宽度(没有滚动条)和一些只是整个宽度(有滚动条)但是我没有提示如何解决。

Answer 1

感谢@Jorg 对我的问题留下的评论，一条新的线索开始了，这让我找到了 mqGenie .

mqGenie 调整浏览器中的 CSS 媒体查询，将滚动条的宽度包括在视口(viewport)宽度中，以便它们以预期的大小触发，因此我下载了脚本并简单地链接到我页面上的脚本，一切都按预期工作。

我强烈建议任何遇到同样问题的人下载 mqGenie，它是根据 MIT 许可获得许可的(详见 LICENSE)和使用 UglifyJS 创建的缩小版