根据设备宽度改变样式

Altering Styles Upon Device Width

本文关键字：改变 样式      更新时间：2023-09-26

Meta Tags 

<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的slide和fade函数，它们在被激活时实现内联css到我的页面。除了当你重复这些步骤时，一切似乎都在正常工作:

    打开我的网页
  1. 慢慢改变宽度使其变小
  2. 在两个菜单之间，没有显示。

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

感谢@Jorg在我的问题上留下的评论，一个新的线索开始了，把我引向了mqGenie。

mqGenie调整浏览器中的CSS媒体查询，其中包括viewport宽度中的滚动条宽度，因此它们在预期的大小上启动，因此我下载了脚本并简单地链接到我的页面上的脚本，一切都正常工作。

我强烈建议任何正在处理相同问题的人下载mqGenie，它是在MIT许可下许可的(详细信息请参阅许可证)和使用UglifyJS创建的迷你版本

相关文章：