适用于 Android 的媒体查询答案

【问题标题】：Media Queries for Android适用于 Android 的媒体查询
【发布时间】：2013-09-12 02:29:27
【问题描述】：

我正在尝试设置 MQ 以使站点响应。我已将其链接，并且一切正常，但需要注意的是 max-width: 480px 不适用于机器人。当我将最大宽度增加到大约 900 像素时，它确实可以识别我的移动样式表。

我还没有找到答案，我玩过一些视口标签：

<meta name="viewport" content="width=device-width" />

和

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

使用媒体查询定位 Android 手机的最佳方法是什么？

【问题讨论】：

【解决方案1】：

您可能会遇到的一个问题是，Android 手机（甚至比 Apple 手机）具有不同的像素宽度。

例如，如果您在三星 Galaxy S3 或 S4 上进行测试，这些手机在横向模式下的像素宽度远远超过 480 像素，即使考虑到像素密度，所以媒体查询永远不会触发。对于一些较新的设备，您最好定位用户代理，然后根据该标头响应提供移动查询。

另外，请参阅answer，了解有关移动设备测试的更多详细信息。

【讨论】：

那么我会定位-webkit-device-pixel-ratio吗？我还是有点不清楚如何解决这个问题，但诊断工具非常整洁。
对，所以你可以尝试结合 device-pixel-ratio 和 min-width 和 max-width 来定位 droid 不可思议的 2，但如果最终像素宽度仍然是 800px，您将不得不编写一个媒体查询来定位该设备。更好的方法是使用用户代理来定位设备，或者通过使用modernizr，您可以仅向 html.touch 提供特定样式，这将针对所有移动设备和平板电脑设备。

【解决方案2】：

您想首先将元标记更改为

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

祝你好运！

【讨论】：

试过了，但没有运气，我正在测试一个令人难以置信的机器人 2，它在 Firefox 的响应模式下工作，就在机器人上，我需要将宽度一直调整到 800 像素，然后会与 iPad 和其他设备重叠
澄清一下，当您说 max-width: 480px 不适用于 droid 时，布局看起来不好吗？
不，现在我只是更改一些颜色来测试连接并确保尺寸规格有效，当我设置为 480px 时，文本仍然是黑色（默认样式表），只会变成红色（对于移动样式表）在 800 像素及以上。
你试过没有第二个 target-densityDpi=device-dpi 元标记
是的，尝试单独执行它们并得到相同的结果。它似乎与(-webkit-min-device-pixel-ratio: 1.4) 合作，但我担心的是，我没有所有设备来查看这可能对其他设备产生什么影响