html - 媒体查询在我调整窗口大小时有效，但在其他设备上无效

Question

我找遍了，找不到任何解决办法。我的媒体查询在移动设备上不起作用，但它们在我调整屏幕大小时起作用。

是的，我有:

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

在我文档的头部。

这是我的媒体查询的样子:

  @media only screen and (max-width: 1100px) {
    .r-menu {
      display:inline;
    }
    .m-menu {
      display:none;
    }
  }
  @media only screen and (max-width: 900px) {
    .res-full {
      width: 100%; 
    }
  }

谢谢。

这是完整的代码:http://scratchpad.io/marvelous-holiday-5460

Answer 1

将only screen替换为all

@media all and (max-width: 1100px) {
  .r-menu {
    display:inline;
  }
  .m-menu {
    display:none;
  }
}
@media all and (max-width: 900px) {
  .res-full {
    width: 100%; 
  }
}

screen 用于计算机屏幕，而 all 用于所有媒体类型设备