CODEWITHSUNDEEP
cssmobilewebmobile-websitepixel-ratio
Apollo Creed
Apollo Creed

Reputation: 219

Why does my 1080p screen render websites at 640px?

google says "because css pixel ratio" but I can't figure out what that is, or why it exists.

Why am I adding metadata that tells the browser to render the screen at <2/3rd the screen's resolution? Images (as far as I can tell) don't get resized, so why is everything else? and why this so common?? wts is going on??

Upvotes: -1

Views: 2115

Answers (2)

Mr Lister
Mr Lister

Reputation: 46599

While Billy's post did answer the question, and it does a good job of describing the general mechanism, the question did rise how to set the webpage to full screen in browsers that don't zoom out all the way by default. That is, use every pixel on a 1920×1080 screen as if it was a 1920×1080 desktop monitor.

Well, unfortunately there is no failsafe way to do that, but you can get close if you include some device specific @media queries.

html, body {margin:0; width:1920px; height:1080px; font-size:16px;}
@media (-webkit-min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
@media (min-device-pixel-ratio:1.5)         { body {zoom:.66666667} }
@media (min-resolution:1.5dppx)             { body {zoom:.66666667} }
@media (-webkit-min-device-pixel-ratio:2)   { body {zoom:.5} }
@media (min-device-pixel-ratio:2)           { body {zoom:.5} }
@media (min-resolution:2dppx)               { body {zoom:.5} }
@media (-webkit-min-device-pixel-ratio:3)   { body {zoom:.33333333} }
@media (min-device-pixel-ratio:3)           { body {zoom:.33333333} }
@media (min-resolution:3dppx)               { body {zoom:.33333333} }
@media (-webkit-min-device-pixel-ratio:4)   { body {zoom:.25} }
@media (min-device-pixel-ratio:4)           { body {zoom:.25} }
@media (min-resolution:4dppx)               { body {zoom:.25} }

This will (attempt to) zoom the scale of the page so that the number of CSS pixels is the same as the number of hardware pixels.
Of course if you take this approach, note that you will have to add new media queries with higher resolutions as time progresses.
And it will fail on devices that are not 1920×1080 pixels.

A better approach would be to not contemplate the hardware resolution at all, but just work with what you have. Don't use pixels, use percentages or vw and vh for measurements. 50vw, not 960px, is the horizontal centre of the screen. That way, your webpage wil display correctly on any device, no matter its characteristics. No scrolling or pinching needed!
You may find you have to differentiate between landscape and portrait modes with @media queries, but that depends on the contents of the page.

Upvotes: 3

Billy
Billy

Reputation: 1043

You need to understand why you are adding certain codes into your file. You said you have <meta name="viewport" content="initial-scale=1"> in your code. What initial-scale means is, upon page load, the page will be viewed at 100% zoom level. It's not about filling 1 CSS pixel to 1 hardware pixel. It's about filling 1 CSS pixel to 1 device-independent pixel.

As defined in Google's developer reference:
Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.
Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.

Are the hardware pixels on your phone different from those on your PC monitor? Yes, they are different in terms of size (pixel density). Assuming your 21" monitor and 5" phone screens both have 1920px x 1080px screens, so obviously the pixel density is much higher on the phone's screen (and much smaller pixels) and it would not be wise to show up the webpage using the ratio of 1 CSS pixel to 1 hardware pixel since everything will be too small on the phone screen.

So what if you don't want responsive website design, but to fit the whole page into the small screen like what you see on a PC monitor? All you need to do is to remove the <meta name="viewport" content="width=device-width, initial-scale=1"> line and browsers will automatically fit the page onto the screen by default, by zooming out (i.e. initial scale will not be 1). Developers only add this line of code if the website needs to be responsive, and has the relevant CSS media queries for that.

Upvotes: 3

Related Questions