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到我的页面。除了复制这些步骤之外，所有这些似乎都在起作用：

打开我的webpage
慢慢改变宽度
在两个菜单之间，没有任何显示。

我整个星期一直在与这个斗争，我个人认为这是由于一些浏览器媒体查询宽度读取内部宽度（没有滚动条）和一些只是整个宽度（使用滚动条）但是我还没有线索如何解决。

Answer 1

感谢@Jorg在我的问题上留下了他的评论，一个新的领导开始引导我mqGenie。

mqGenie在浏览器中调整CSS媒体查询，这些浏览器在视口宽度中包含滚动条的宽度，因此它们会以预期的大小触发，因此我下载了脚本，只是链接到我页面上的脚本，所有内容都有效应该。

我强烈建议任何处理相同问题的人下载根据MIT许可证获得许可的mqGenie（详见LICENSE）和使用UglifyJS创建的缩小版本

在设备宽度上改变样式

1 个答案: