媒体查询不能在电话上运行（但可以在浏览器上运行）

Question

我使用Foundation/Yeoman等创建了我的婚礼网站，并在GitHub上托管。直到几周前，所有的媒体查询都能正常运行（我根本没有更改任何内容，也没有编辑我的网站），现在它在iPhone/手机浏览器上都不起作用了。它在我的iPad上起作用，当我最小化屏幕时，它在桌面浏览器上也起作用。老实说，我试过这么多东西，都想不通。

麦哲伦导航系统在移动设备上也不起作用...

请救命！提前谢谢！

www.daniandjaymo.com是网站。

这里是CSS（我有一个meta标签，上面有view port（视图端口），因为当您第一次安装它时，它是用foundation设置的）

    @media only screen and (min-width: 44.5625rem) {
     .intro  {
      background-image: url("/images/meandjaymo5.jpg");
      background-position: center center;
      background-size: $background-size;
      padding: 100px 0 0 0;
      }
    }
    @media only  handheld, screen and (max-width: 44.5rem) {
     .intro  {
      background-image: url("/images/meandjaymo5-2.jpg");
      background-size: cover;
      background-position: center center;
      padding: 100px 0 0 0;
      }
    }


    @media only screen and (min-width: 700px){
        .bridal {
        padding: 10px 50px 50px 50px;
      }
    }
      @media only screen and (max-width: 699px){
          .bridal {
        padding: 20px;
      }
    }
    .to-do-boxes {
      padding: 30px 25px 20px 25px;
    }
      @media only screen and (min-width: 1000px) {
        .to-do-boxes {
      width: 30%;
      margin: 10px;
      }
    }
      @media only screen and (min-width: 930px) and (max-width: 999px) {
        .to-do-boxes {
      width: 50%;
      margin: 25px;
      }
    }
      @media only screen and (max-width: 929px) {
        .to-do-boxes {
      width: 100%;
      margin: 10px;
      }
    }

Answer 1

您的html应该包括以下一行：

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