2

我正在尝试将图像设置为 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 的视口尺寸是 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，以使图像正确显示在整个高度上。

非常感谢您！

4

1 回答 1

1

除了显式设置高度之外，您还应该能够使用带有 CSS 的视口单位......所以您可以执行以下操作：

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

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

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

于 2015-09-19T02:56:34.533 回答