提问者:小点点

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


我使用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;
      }
    }


共1个答案

匿名用户

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

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