Question

背景

使用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。有更好的方法吗？

Answer 1

自从我上次使用android SDK和Web视图以来，已经有一段时间了，但是你不能简单地从java端公开信息，你可以在那里可靠地确定它吗？因此，无论何时您的方向发生变化，最初都要打电话

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

并在您的javascript中将维度写入逻辑位置。

这不是从javascript，但这是不可能的，任何时候我都需要按照你想要的方式远程做任何事情需要大量的试验和错误来获得它跨设备支持，所以我个人建议你使用你有webview的事实。（如果您有任何机会使用像cordova这样的webview框架，你甚至可以相对简单地制作一个javascript插件）

Answer 2

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

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

使用javascript获得可靠的可用宽度和高度

2 个答案: