gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:57:06 25 4
gpt4 key购买 nike

背景

我在使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com