媒体查询和 CSS LESS FRAMEWORK 4

Question

我已经在 less 4 框架中安装了 css 默认值。它们提供根据“浏览器大小”更改正文声明的媒体查询。我添加了声明来更改正文背景颜色，这样当我在桌面上缩放 google chrome 浏览器时，我就可以看到哪个媒体查询正在启动。

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

  /*        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 Feeling Android 浏览器中打开页面时，它是黄色的。显然，媒体查询并没有针对我的浏览器的“大小”起作用。我还读到有一种叫做视口的东西，它可能正在缩放我的手机中的页面，使得浏览器分辨率不满足媒体查询阈值。如何解决此问题，以便为我的手机启动正确的媒体查询？

Answer 1

使用设备宽度作为 iOS 和 Android 的默认设置，然后仅使用 iOS 的方向扩展媒体查询