使用 javascript 获取可靠的可用宽度和高度答案

【问题标题】：Getting reliable available width and height using javascript使用 javascript 获取可靠的可用宽度和高度
【发布时间】：2013-04-19 12:17:18
【问题描述】：

背景

我无法使用 JavaScript 获得可靠的视口大小。我已通读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

问题 1

我曾希望实际可用像素可以这样计算：

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。有没有更好的方法来做到这一点？

【问题讨论】：

也许 jQuery width() 和 height() 中的值会为您返回正确的值？ responsejs.com/labs/dimensions
Hye Jack，请告诉我你是如何最终得到适合你的尺寸的。我也面临同样的问题。

标签： javascript android android-webview

【解决方案1】：

自从我上次使用 android SDK 和 web 视图以来已经有一段时间了，但是你不能简单地从 java 端公开信息，在那里你可以可靠地确定它吗？所以任何时候你的方向改变+最初你打电话

webview.loadUrl("javascript:setResolution(x,y,orientation)");

然后在您的 javascript 中将尺寸写入合乎逻辑的位置。

顺便说一句，这在javascript中是不可能的，但是任何时候我需要按照你想做的事情远程做任何事情，都需要大量的试验和错误才能得到它支持跨设备，因此我个人建议您使用拥有网络视图这一事实来发挥自己的优势。（如果你有机会使用像cordova这样的webview框架，你甚至可以相对简单地用它制作一个javascript插件）

【讨论】：

谢谢。这个想法确实闪过我的脑海:) 话虽如此，它只解决了一个问题；另一个问题是根据设备 dpi 知道有多少 px 可供您使用。你也有解决方案吗？
您不能简单地使用DisplayMetrics metrics = getResources().getDisplayMetrics(); 并将metrics.xdpi; metrics.ydpi; 传递给您的webview，如上所述？但是，如果您使用的是target-densitydpi=device-dpi，那么除了确定“现实生活中”的尺寸外，这应该几乎没有用处。虽然说实话，我不完全确定你的最终目标是什么。
或者听起来你可能想使用metrics.widthPixels 和metrics.heightPixels，到头来还是一样的。
对于DisplayMetrics，我不知道可用的宽度是1080px（目标dpi）还是320px（默认dpi）。
所以你实际上不想使用target-densitydpi=device-dpi?

【解决方案2】：

您可以使用 CSS 媒体查询来定位您想要定位的内容吗？

如果是这样，也许您可以使用 matchMedia.js 解决您的问题 - 一种用于在 JavaScript 中测试媒体查询的跨浏览器解决方案。有什么要考虑的，对吧？因为除了尺寸查询之外，您还可以使用-webkit-device-pixel-ratio（在您链接到的指南中提到）？

【讨论】：