Question

我使用粉底/自耕农等创建了我的婚礼网站，并在github上托管它。所有媒体查询都在几周前完美运行（我没有改变任何内容或编辑我的网站），现在它无法在iPhone /手机浏览器上运行。它可以在我的iPad上运行，当我最小化屏幕时，它可以在桌面浏览器上运行。我老实说已经尝试了很多东西而无法弄明白。

magellan导航链接无法在移动设备上运行......

请帮忙！提前谢谢！

www.daniandjaymo.com是该网站。

这是CSS（我的元标记顶部有视图端口，因为它在你第一次安装时设置了基础）


    @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">

媒体查询无法在手机上工作（但它适用于浏览器）

1 个答案: