媒体查询似乎不起作用

Question

我正在一个网站上工作，并且正在尝试使用媒体查询来使我的网站在移动设备和台式机上都能正常工作。 我的桌面网站有一个浮动菜单栏，我希望该菜单栏与移动网站相对。

因此，在我的CSS文件中，这些行如下：

    /*For desktop*/
    nav#menubar {
      position: fixed;
      top: 0px;
    }

    /*For iPhone 5 */
    @media screen and (max-width: 768px){
      nav#menubar {
        position: relative;
        top: auto;
      }
    }

当我运行此菜单栏时，它与桌面页面和移动页面都是相对的。 但是，当我注释掉For iPhone 5媒体查询时，菜单栏在移动设备和台式机上都是固定的。 有谁知道为什么媒体查询同时适用于台式机网站和移动网站？

任何帮助将不胜感激。

Answer 1

可以肯定的是，您是否在HTML中包含<meta name="viewport" content="...">标记？ https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html