android - PhoneGap 中的 screen.width/device-width 与常规浏览器不同

Question

我在浏览器和 PhoneGap 应用程序中加载了相同的内容。我使用 CSS 媒体查询来区分移动设备和桌面设备。该查询在浏览器中运行良好，但在 PhoneGap 中失败(两者都在同一部手机上运行)。

使用 Chrome 中的远程设备检查器，我可以运行控制台语句并检查问题。在常规浏览器中加载的页面报告 screen.width是360因为设备使用的是 3:1 的像素比。如果我检查通过 PhoneGap 加载的相同页面，则 screen.width正在报告 1080 .不过，在这两种情况下，window.devicePixelRatio报告 3 !

我读过其他人有问题，因为他们没有设置 viewport但我目前将其设置为:<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">

这两种设备似乎对 window.innerWidth 给出了相同的答案这是360 ...

我如何获取它以便我的 CSS 媒体查询匹配 device-width在浏览器和 PhoneGap 中都能正常工作吗？

编辑

我认为不同之处在于 PhoneGap 使用的是 Android System WebView，而另一个使用的是 Chrome for Android。显然 WebView 报告物理像素而 Chrome 报告虚拟像素。有解决办法吗？？

Answer 1

在 Android 5.0 之前，内置的 webview 是“Android”，之后是基于 Chromium 的。 “Android”报告了物理像素。我认为 Chromium 可以正确报告“css 像素”。然而，即使在 Android 5.0 设备上，如果 APK 是使用较低版本的 SDK 编译的，它的行为似乎与“Android”webview 相同并使用物理像素。

但是，基于 max-device-width 的 CSS 媒体查询已被弃用，因此我改为使用 max-width，它在不同的设备/浏览器中可靠地使用“CSS 像素” .