我在浏览器中和PhoneGap应用程序中加载了相同的内容。 我正在使用CSS媒体查询来区分移动设备和桌面。 查询在浏览器中工作正常，但在PhoneGap中失败(两者都在同一部手机上运行)。
使用 Chrome 中的远程设备检查器，我可以运行控制台语句并检查问题。 在常规浏览器中加载的页面报告screen.width360，因为设备使用的是 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......
如何获取它，以便与device-width匹配的 CSS 媒体查询在浏览器和 PhoneGap 中正常工作？
编辑
我认为区别在于PhoneGap使用的是Android System WebView，而另一个使用的是Android版Chrome。 显然，WebView报告物理像素，而Chrome报告虚拟像素。 有没有办法解决这个问题？？
在Android5.0之前，内置的webview是"Android"，之后是基于Chromium的。 "Android"报告了物理像素。 我认为Chromium正确报告"css像素"。 但是，即使在Android 5.0设备上，如果APK是使用较低版本的SDK编译的，则其行为似乎与"Android"Web视图相同，并使用物理像素。
但是，基于max-device-width的 CSS 媒体查询已被弃用，因此我改用在不同设备/浏览器中可靠地使用"CSS 像素"的max-width。