Question

出于某种原因，以下版本不适用于默认Android浏览器中的三星Galaxy S3设备...

@media only screen and (min-width: 480px) and (max-width: 960px) {  
  /* Force 3 columns into 2 columns between 480px and 960px widths */
  .products-grid--max-3-col > li {
    width: 50%;
    margin-right: 0;
  }
  .products-grid--max-3-col > li:nth-child(even) {
    margin-right: 0;
  }
  .products-grid--max-3-col > li:nth-child(3n+1) {
    clear: none;
  }  
}

这样做的原因是为了防止布局（产品网格）流向3列，直到宽度为961px以上。

如果您在同一设备上的Chrome浏览器中查看该页面，则会按预期显示2列，但在默认的Android浏览器中，显示相当混乱的3列。

我绝对难以理解为什么这个媒体查询无法在默认的Android浏览器中运行。以上是否足以瞄准Galaxy S3的景观视图？

Answer 1

卫生署。恐慌，就像一个完全白痴，我们在另一个非常长的媒体查询中插入了一个媒体查询（甚至没有意识到）。

对于Chrome来说这不是一个问题，但是显然Android并不喜欢这个......

无论如何，在长媒体查询之外移动媒体查询为我们解决了这个问题。考虑到删除这个问题，但你永远不知道，这可能发生在偶然遇到这个问题的其他人身上......

媒体查询无法在默认的android浏览器中工作（在同一设备上的其他浏览器中都可以）

1 个答案: