媒体查询不适用于 Android

Posted 2023-03-06

【中文标题】媒体查询不适用于 Android

【英文标题】：Media queries don't work for Android

【发布时间】：2015-09-06 01:52:34

【问题描述】：

我正在使用 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" />

【问题讨论】：

听起来类似于这个问题：***.com/questions/17102161/…

【参考方案1】：

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

【讨论】：

当我说“他们不工作”时，我的意思是媒体查询没有被反映，并且显示原始 css 而不是每个屏幕尺寸的条件 css。对我来说特别没有意义的是，由于我使用的媒体查询大小不一，您会认为它们会捕获设备，因为范围如此广泛。也许这与像素比率有关？

@Matt，我严重怀疑这与 dpi（每英寸点数/像素比率）有关。您可以从 PPK 阅读very good article。我认为你应该检查你的屏幕尺寸。然后尝试在 Google Chrome 或最新的 firefox 上布局代码，这两种仿真模式都可用于移动开发。在 firefox 上，使用 ctr-shift-m 在 chrome 上，使用 ctrl-shift-i 您应该能够测试更改虚拟设备，或在模拟模式下调整视口大小。

就是这样，我正在使用这些工具进行测试，一切看起来都很棒。然后，当我使用 phonegap build 进行部署时，事情的表现并不像预期的那样。很奇怪吧？

【参考方案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。这可能会正确处理回流。

杰西

【讨论】：

很抱歉，我该如何准确地“重排”应用程序？

在我发布的链接（google.com/search?q=html+force+reflow）中，前几个链接有几种解决方案。比如，***.com/a/3485654/3255670 这里还有一篇文章解释了css reflow — [最小化浏览器回流](developers.google.com/speed/articles/reflow) 如果您需要更多解释或帮助，请询问。

好的，我想你可能误解了我最初的问题。该应用程序启动一段时间后我没有遇到问题，而是在启动时立即出现问题。当我使用 Phonegap Build 构建时，我的媒体查询没有为 Android 激活，但是当我在浏览器中测试代码（调整到适当的尺寸）时，它工作得很好。有什么解决办法吗？

你的 中是否有这个元元素 --->> <meta name="viewport" content="width=device-width"> ?

如果您在“head”中包含了“meta”标签，那么您使用什么设备进行测试？因为我认为您是在说：#1 您使用 Phonegap Build 构建应用程序。 #2 您在设备上启动应用程序。 #3 初始视图（或 html 页面）未正确缩放。 #4 一段时间后，html 页面正确呈现。 \\\\\\\\\\\\\\\\\\\\ 如果这是正确的，您的 CSS 中有一些东西会导致延迟。如果这不正确，您可能有错误。 \\\\\\\\\\\\\\\\\\\\\ 底线：媒体查询正在工作，因此您的代码应该可以工作，在 API 中排除怪癖或错误。