I'm trying to set an image to be the full height of a screen on a phoneGap app. Currently, I'm using the following code to determine the screen "dimensions" and I'm using javascript to set the image resolution to those dims.
$('.fullPageImage').height(window.screen.availHeight);
This produces the desired result on the iPhone 6 (retina display) as well as rendering on my laptop. The problem is when I try it on my Galaxy Note-3, the image is HUGE, and here's why: When I console.log(window.screen.availHeight); the Note seems to think its height is 1920 pixels - whereas my iPhone 6 only has 647 (and it's a retina display), so I know 1920 is not the actual number of pixels (or is it?). I looked into how the device is obtaining its window.screen.availHeight and found out there's this variable called window.devicePixelRatio and its value on the Note 3 is 3. I figured the viewport dimension on the Note 3 is 360x640, so the 3 for devicePixelRatio makes sense. Now, what puzzles me is that when I console.log(window.devicePixelRatio); on my iPhone 6, the result is 2. I tried setting the image height to 1/3 of the "availHeight" value using this code:
$('.fullPageImage').height(window.screen.availHeight/window.devicePixelRatio);
and it works great on the Note 3 (since it shrinks the image height down to 360 - as it should be), but on the iPhone, shrinking the image down to 324 (or something close) means the image onlly appears over half the page height.
My question is, instead of dividing by the devicePixelRatio, is there another variable I can obtain from the device in order to determine the ratio by which to shrink the image? The resulting ratio should 1 on the iPhone and 1/3 on the Note 3 in order for the image to correctly appear over the full height.
Thank you so much in advance!
Rather than explicitly setting the height, you should have the capability to use viewport units with CSS... so you could do something like the following:
$('.fullPageImage').css("height", "100vh");
That would set the height to 100% vertical height of the viewport, whatever that value might be.
You might also want to look into adding a <meta name="viewport" content="width=device-width, initial-scale=1"> tag to your header.