背景
我在使用 JavaScript 获取可靠的视口(viewport)大小时遇到了问题。我已经通读了 this guide设置应用程序和this guide了解如何针对特定设备分辨率。
这是 <meta>页面上的标记:
<!DOCTYPE html>
...
<meta name="viewport" content="target-densitydpi=device-dpi" />
这让我可以使用最清晰的图像来绘制界面。为了测试分辨率，我编写了这段代码:
window.addEventListener('orientationchange', function() {
console.log(screen.availWidth + ' x ' + screen.availHeight)
}
// 1080 x 1920 or 1920 x 1080
问题一
我曾希望实际可用像素可以这样计算:
width := screen.availWidth / devicePixelRatio
height := screen.availHeight / devicePixelRatio
但是 devicePixelRatio固定在 3 , 独立于目标 dpi;那么如何确定可供我使用的实际像素？
问题2
以上screen.availHeight不准确，因为它没有考虑 WebView 的实际高度组件。
我已经尝试过这些替代方案:
console.log(document.documentElement.offsetHeight);
// 1920
console.log(window.innerHeight);
// 240
这些值几乎没有用，更糟糕的是，它们不会在屏幕旋转时改变，也不依赖于目标 dpi。有更好的方法吗？
最佳答案
自从我上次使用 android SDK 和 web views 以来已经有一段时间了，但是你不能简单地从 java 端公开你可以可靠地确定它的信息吗？所以任何时候你的方向改变+最初你打电话
webview.loadUrl("javascript:setResolution(x,y,orientation)");
并且在您的 javascript 中，您将维度写入一个合乎逻辑的位置。
顺便说一句，这不是通过 javascript 做不到的，但是任何时候我需要按照您想做的事情远程做任何事情时，都需要反复试验才能得到它支持跨设备，所以我个人建议您利用拥有 webview 的优势。 (如果你有机会使用像 cordova 这样的 webview 框架，你甚至可以相对简单地用它制作一个 javascript 插件)
关于javascript - 使用javascript获取可靠的可用宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16104434/