在 PhoneGap 上将图像设置为全屏高度 - 理解 window.devicePixelRatio
Set image to full screen height on PhoneGap - Understanding window.devicePixelRatio
我正在尝试将图像设置为 phoneGap 应用程序屏幕的全高。目前，我正在使用以下代码来确定屏幕 "dimensions" 并且我正在使用 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 是有意义的。现在，令我困惑的是，当我在 iPhone 6 上 console.log(window.devicePixelRatio); 时，结果是 2。我尝试使用以下代码将图像高度设置为 "availHeight" 值的 1/3：
$('.fullPageImage').height(window.screen.availHeight/window.devicePixelRatio);
它在 Note 3 上效果很好（因为它将图像高度缩小到 360 - 它应该是），但在 iPhone 上，将图像缩小到 324（或接近的东西）表示图像仅出现在页面高度的一半以上。
我的问题是，除了除以 devicePixelRatio 之外，我是否可以从设备获得另一个变量来确定缩小图像的比率？生成的比率在 iPhone 上应为 1，在 Note 3 上应为 1/3，以便图像正确显示在全高。
在此先感谢您！
而不是显式设置高度，您应该能够将视口单位与 CSS...一起使用，这样您就可以执行如下操作：
$('.fullPageImage').css("height", "100vh");
这会将高度设置为视口垂直高度的 100%，无论该值是多少。
您可能还想考虑将 <meta name="viewport" content="width=device-width, initial-scale=1"> 标签添加到您的 header。
我正在尝试将图像设置为 phoneGap 应用程序屏幕的全高。目前，我正在使用以下代码来确定屏幕 "dimensions" 并且我正在使用 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 是有意义的。现在，令我困惑的是，当我在 iPhone 6 上 console.log(window.devicePixelRatio); 时，结果是 2。我尝试使用以下代码将图像高度设置为 "availHeight" 值的 1/3：
$('.fullPageImage').height(window.screen.availHeight/window.devicePixelRatio);
它在 Note 3 上效果很好（因为它将图像高度缩小到 360 - 它应该是），但在 iPhone 上，将图像缩小到 324（或接近的东西）表示图像仅出现在页面高度的一半以上。
我的问题是，除了除以 devicePixelRatio 之外，我是否可以从设备获得另一个变量来确定缩小图像的比率？生成的比率在 iPhone 上应为 1，在 Note 3 上应为 1/3，以便图像正确显示在全高。
在此先感谢您！
而不是显式设置高度，您应该能够将视口单位与 CSS...一起使用，这样您就可以执行如下操作：
$('.fullPageImage').css("height", "100vh");
这会将高度设置为视口垂直高度的 100%，无论该值是多少。
您可能还想考虑将 <meta name="viewport" content="width=device-width, initial-scale=1"> 标签添加到您的 header。