screen.apap / device-width在PhoneGap和常规浏览器中有所不同

Question

我在浏览器中加载了相同的内容，也通过PhoneGap应用程序加载。我正在使用CSS媒体查询来区分移动设备和桌面。该查询在浏览器中工作正常但在PhoneGap中失败（两者都在同一部手机上运行）。

在Chrome中使用远程设备检查器，我可以运行控制台语句并检查问题。由于设备使用的像素比率为3：1，因此在常规浏览器中加载的报告screen.width为360。如果我检查通过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提供了相同的答案。{/ 1}}

如何在浏览器和PhoneGap中正确地使用device-width匹配的CSS媒体查询？

修改

我认为不同之处在于PhoneGap正在使用Android System WebView，而另一个则使用Chrome for Android。显然，当Chrome报告虚拟像素时，WebView会报告物理像素。有没有办法解决这个问题？

Answer 1

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

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