Set image to full screen height on PhoneGap - Understanding window.devicePixelRatio - javascript

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.

Related

Mobile browser positions elements as if the view is 360px wide, but renders images on the page at a higher resolution. How does this work?

I was having a hard time figuring out how to phrase this. Sorry if this is a noob question, I'm new to responsive design and mobile web design in general.
My phone (Galaxy s10e) will render my webpage as if it's 360 pixels wide, with all elements positioned appropriately based on this width. I have several image tags on the site that are the same width. I was using src images that are 360px wide, and this looks fine on desktop because it is actually rendering my images at 360px, but on mobile the images alone appear to be rendering at a much higher resolution, causing it to look terrible due to upscaling.
If someone could explain to me what is happening here it would really help, since I can't find information on this specific behavior. Some questions I have:
Is the browser choosing to position the elements based on a 360px width while rendering the actual content at the screen's resolution?
How do I account for this in my design? I considered rendering the images at the higher resolution and then having the page dynamically scale those images down (so even though the actual div is 360px, the browser can use the 'extra space' allotted by max-width to render the image at a higher resolution), but I want the images to remain 360px wide on desktop, not the higher max-width for mobile rendering.
Where can I learn all about this behavior so I know how to tackle responsive image scaling in the future?
Thank you for your time. Let me know if you have any other questions. I'm using ReactJS to develop the site.
OK so in a nutshell pixels are relative sizes. One pixel is not literally one pixel on your phone.
What happens is PPI kicks in and basically zooms in to make things readable.
Because if you actually tried to view 360px on a phone with that pixel density you'd see nothing really.
So lets look at some phone specs:
6.1 INCH
5.90 x 2.77 x 0.31 INCH
Resolution 1440 x 3040 PX ~ 550 PIXELS PER INCH
Viewport 360 x 760 PX 138 PIXELS PER INCH
Now the viewport is what you actually see on screen. in this case it give you a pixel ratio of like 4. So that means your phone has a resolution 4 times that of it's viewport.
so for a web app where a div is set to 200px wide it will display 200px as you'd expect it based on the viewport but this div is actually 800px wide relative to your phones resolution.
Now pictures don't need this limitation. Whats the point in a high res display if your pictures only display 200px with a pixel density one fourth of your screens capability.
So a picture lives in a dual reality on your phone. It has a box size which is the size of the image relative to your viewport but the image itself inside the box lives within your resolution relative to your devices total screen pixels.
So when you have and image that's 200px in the viewport its display resolution is actually 800px. So when you put a picture that's only 200px and have it on a screen that does viewport scaling which nowadays is pretty much everything you're effectively stretching that image to four times its actual size. or what ever the screen pixel density ratio to viewport is. AKA it looks like crap.
And to answer your needs on this I'm just going to direct you here to MOZ who will go over the whys and how's as well as show you what to do to combat this.
Moz on Viewports
Combating element position is pretty easy you just use :
<meta name="viewport" content="width=device-width, initial-scale=1" />
In your <head>,
Moz on Image Scaling

html - Automatic zoom to different monitor sizes

I've been wondering if there was a way to change the zoom on an html webpage according to the monitor size. For example, a 500px by 500px image would look big on a laptop although a monitor for a PC would make it look small. Is there possible solution I can make so that the picture scales in size as the monitor size changes?
Also, I would like the screen to just zoom not change in pixels.
Thanks!
You could use % instead of px to set the size of the image.
In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
source: https://www.w3schools.com/tags/att_img_width.asp
Or in CSS you could use Media Queries to have different style depending on the device used.

Why does webview report different screen size, and can I disable this

So basically, I created an Android WebView, in a 720 x 1280 screen. However when I evaluate screen.width and screen.height, the response is 360 and 640.
I understand that this may be partly so that content is displayed on a readable way, but, when I tried to set a static width to the WebView, like 1000px x 1000px, the Javascript still evaluates the same.
Is there a way to disable this, so that the content looks same as it would on a desktop screen, and the screen.width and screen.height return the real phone resolution or the one I manually set in the XML.
A Crosswalk (based in chromium) solution is also acceptable, even if it includes changing the source code, if WebView solution is not possible.
If I understand you right, you want to show websites in desktop mode, not in mobile mode. To achieve this you can use this custom subclass of WebView: https://github.com/delight-im/Android-AdvancedWebView
It has a method setDesktopMode(true) that will do what you want.
This maybe be due to the pixel ratio of the device.
see this thread for a detailed explanation
Note that different android screens will have different ratios depending on their resolutions. My experience is with iphone / ipad; and my solution was to detect the pixel ratio and use that as a multiplier for positioning all elements.
Also If feasible, I recommend positioning based on a multiplier rather than a fixed value. For example:
x = 0.5 * screen.width * xPixelRatio
will give you a relative position at 50% (i.e the middle) of the screen. By positioning elements in this way as long as your aspect ratio is the same the elements will always stretch to fit properly, and you can adjust for different aspect ratios by changing the xPixelRatio & yPixelRatio variables.

Find actual screen resolution (not CSS pixels, real screen) with javascript

These days there's a big difference between pixels and points (CSS pixels, DIPS). On my particular computer its the same, but on retina macs and a lot of phones, there's 4 or 8 pixels per point. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
That is, the “pixels” that are used in CSS declarations such as width: 300px or font-size: 14px,have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.
I want to get the screen resolution (the real screen resolution, you get it by now), and then serve an image scaled to maximally fill the screen. This means no need to get 2000x2000 pixels images on mobile devices, while still getting good resolutions on a large mac.
Hover, when using screen.height it returns CSS pixels not the screen resolution, meaning a retina mac will get an image that is half the size of the screen, resulting in pixelation. Any way to get the actual screen resolution, or the pixels-to-points ratio in javascript?
This will give you the actual screen height, regardless of pixel density which is altered by including the viewport tag...
screen.height * window.devicePixelRatio
Macs with retina renders pages in 2x scale, and so screen.height returns actual height divided by 2. See answers here

Android browser setting element size too small

I have a website using the meta tag <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">, Javascript that formats the css for body to screen width and height, and elements inside that have percentage-based widths.
On desktop, this works fine. On my Android phone and tablet's browsers, though, the content isn't scaling properly - everything is just a little too small, and double-tapping to zoom zooms in to the right size (while not displaying the entire page width). This happens both in portrait and landscape mode, and the zoom level appears to be identical, or at least similar.
I have an alert come up telling me what the javascript has formatted body width and height to, and it is always right, but the browser feels the need to load as though the size of the window was actually larger.
I understand there's some nonsense where browsers get confused between CSS pixels and real pixels, but I thought the meta tag there was supposed to fix all of that.
So how do I make the browser load the page to a real 100% screen size, and not some sort of ~125% size?
Add
user-scalable=no
to your viewport meta-tag, this (at least in my tests) forces the browser to display at the width specified instead of the user/browsers preference.

Categories