5

背景

我无法使用 JavaScript 获得可靠的视口大小。我已通读本指南以设置应用程序，并阅读本指南以了解针对特定设备分辨率的信息。

这是<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。有一个更好的方法吗？

4

2 回答 2

3

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

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

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

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

于 2013-04-23T09:44:44.290 回答
0

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

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

于 2013-04-25T15:35:03.117 回答