根据设备宽度改变样式答案

【问题标题】：Altering Styles Upon Device Width根据设备宽度改变样式
【发布时间】：2014-08-12 09:31:43
【问题描述】：

元标记

<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。除了复制这些步骤之外，一切似乎都在正常工作：

打开我的webpage
慢慢改变你的宽度，让它变小
两个菜单之间没有显示。

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

【问题讨论】：

我实际上认为您的菜单缩放非常好。你能详细说明3.Between the two menus, nothing shows.吗？菜单在任何宽度上都对我来说很好，在一定的最小宽度后它会变成折叠的移动菜单，否则会变成常规的。
在大约 1000 像素到 980 像素之间，不会出现较小的菜单图标。有一个 20 像素的“间隙”。
看看这里：stackoverflow.com/questions/8146874/… 和 stackoverflow.com/questions/11332284/…

标签： javascript jquery html css

【解决方案1】：

感谢@Jorg 对我的问题发表了评论，新的线索开始了，将我带到mqGenie。

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

我强烈建议任何遇到相同问题的人下载 mqGenie，它在 MIT 许可下获得许可（请参阅LICENSE 了解详细信息）和使用 UglifyJS 创建的缩小版

【讨论】：