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

Posted 2023-03-06

【中文标题】PhoneGap 中的 screen.width/device-width 与常规浏览器不同

【英文标题】：screen.width/device-width different in PhoneGap then regular browser

【发布时间】：2017-11-23 09:02:15

【问题描述】：

我在浏览器和 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...

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

编辑

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

【参考方案1】：

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

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