javascript - 在 PhoneGap 上将图像设置为全屏高度 - 了解 window.devicePixelRatio

Question

我正在尝试将图像设置为 phoneGap 应用程序屏幕的完整高度。目前，我正在使用以下代码来确定屏幕“尺寸”，并且正在使用 javascript 将图像分辨率设置为那些暗淡度。

$('.fullPageImage').height(window.screen.availHeight);

这会在 iPhone 6(视网膜显示屏)和我的笔记本电脑上生成所需的结果。问题是当我在我的 Galaxy Note-3 上试用它时，图像很大，原因如下:当我 console.log(window.screen.availHeight); Note 似乎认为它的高度是 1920 像素 - 而我的 iPhone 6 只有 647(而且它是视网膜显示屏)，所以我知道 1920 不是实际数字像素(或者是？)。我调查了设备如何获取其 window.screen.availHeight并发现有一个名为 window.devicePixelRatio 的变量它在 Note 3 上的值为 3。我计算出 Note 3 的视口(viewport)尺寸为 360x640，因此 devicePixelRatio 的 3 有意义。现在，令我困惑的是，当我 console.log(window.devicePixelRatio);在我的 iPhone 6 上，结果是 2。我尝试使用以下代码将图像高度设置为“availHeight”值的 1/3:

$('.fullPageImage').height(window.screen.availHeight/window.devicePixelRatio);

它在 Note 3 上效果很好(因为它将图像高度缩小到 360 - 应该是这样)，但在 iPhone 上，将图像缩小到 324(或接近的值)意味着图像只会出现在上面页面高度的一半。

我的问题是，除了除以 devicePixelRatio 之外，我是否可以从设备获得另一个变量来确定缩小图像的比率？生成的比例在 iPhone 上应为 1，在 Note 3 上应为 1/3，以便图像在整个高度上正确显示。

提前致谢!

Answer 1

而不是显式设置高度，您应该能够使用 CSS 的视口(viewport)单位...因此您可以执行以下操作:

$('.fullPageImage').css("height", "100vh");

这会将高度设置为视口(viewport)的 100% 垂直高度，无论该值是多少。

您可能还想考虑添加 <meta name="viewport" content="width=device-width, initial-scale=1">标记到您的标题。