(CSS3) Android 浏览器不加载响应式 CSS

Question

我正在移动设备上测试我的网站，但在 iOS 上它运行良好，但在 Android 上却不行：网站已放大且无响应。

在我的标签中我有：

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

而在我的 CSS 中有：

@media only screen and (min-width: 979px) {
.isStuck {
   background-color: #000;
   box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
 }  
}
@media only screen and (max-width: 979px) {
 #stuck_container {
  position: relative !important;
  box-shadow: none;
 }
 .pseudoStickyBlock {
   height: 0 !important;
 }
}

Answer 1

自 Android 4.4 起，Android 库存浏览器发生了很大变化，因此如果可以将您的应用程序限制为该版本，您可能会发现它工作正常，根据 Google code issue here。

我建议定位handheld 而不是screen，因为许多移动设备都将自己标识为handheld 设备。

@media handheld, screen and (min-width: 979px) { ... }

之前的问题还建议针对device resolution instead。