媒体查询和 css LESS FRAMEWORK 4

Question

我已经在 less 4 框架中安装了 css 默认值。它们提供基于“浏览器大小”更改正文声明的媒体查询。我添加了更改正文背景颜色的声明，因此当我在桌面上缩放我的谷歌浏览器时，我可以看到正在启动的媒体查询。

默认桌面颜色为白色。然后我有平板电脑布局和移动布局：

  /*        Tablet Layout: 768px.
    Gutters: 24px.
    Outer margins: 28px.
    Inherits styles from: Default Layout.
 -----------------------------------------------------------------
  cols    1     2      3      4      5      6      7      8 
  px      68    160    252    344    436    528    620    712    */

 @media only screen and (min-width: 768px) and (max-width: 991px) {

body {
    width: 712px;
    padding: 10px 20px 60px;
    background-color:yellow;
}
}
/*      Mobile Layout: 320px.
    Gutters: 24px.
    Outer margins: 34px.
    Inherits styles from: Default Layout.
 ---------------------------------------------
       cols    1     2      3 
       px      68    160    252    */

@media only screen and (max-width: 767px) {

body {
    width: 252px;
    padding: 10px 20px 60px;
    background-color:pink;
}

}

当我调整桌面浏览器的大小时，它会改变颜色。但是当我在我的 HTC sense android 浏览器中打开页面时，它是黄色的。显然，媒体查询并没有针对我的浏览器的“大小”起作用。我还读到有一个叫做视口的东西，它可能正在缩放我手机中的页面，使得浏览器分辨率不符合媒体查询阈值。我该如何解决这个问题，以便为我的手机启动正确的媒体查询？

Answer 1

使用 device-width 作为 iOS 和 Android 的默认值，然后扩展媒体查询的方向，仅适用于 iOS