媒体查询不适用于 Android

Question

我正在使用 Phonegap Build，但无法让 Android 媒体查询正常工作。我有有效的 iOS 查询，但 Android 的查询没有响应。

当我在浏览器中测试时，它可以工作，但在构建它之后的设备上却不行。

我的查询：

/* <- 480*/
@media screen and (max-height: 507px){
}

/*508 / 530*/
@media screen and (min-height: 508px) and (max-height: 530px){
}

/*531 / 567*/
@media screen and (min-height: 531px) and (max-height: 567px){
}

/*568 / 600*/
@media screen and (min-height: 568px) and (max-height: 600px){
}

/*601 / 650*/
@media screen and (min-height: 601px){
}

元标记

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Answer 1

@Matt，不工作是什么意思？你能描述一下应该发生的事情吗？此外，屏幕尺寸并不总是正确报告。您可以使用我的ScreenSize 应用程序检查您的屏幕尺寸。该应用程序包含指向您可以查看媒体查询答案的其他地方的链接。

Answer 2

抱歉，blog post 很忙。

我构建了两 (2) 个快速试用应用程序来测试问题可能是什么。使用我的样板应用程序，我添加了媒体查询；它在初始状态后不响应旋转（因此它不会重排）（APP #1）。我还用新的 webview 引擎 crosswalk 对此进行了测试，它似乎有类似的问题（App #2]）。看来我们将不得不强制回流。我没有时间实施任何解决方案，但根据我在过去 15 分钟内阅读的内容，需要做的是 零大小插入和删除 HTML 元素。

随意使用我的代码，或提出拉取请求。如果你拉，我会把它添加到我的Demo Apps。当然，你会因此获得荣誉。 ;-)

我没有测试任何建议。这是我的查找查询：
https://www.google.com/search?q=html+force+reflow

8 小时后 我刚刚意识到我还没有测试过 InAppBrowser。这可能会正确处理回流。

杰西