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

Question

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??

can you post some code so that we can take a closer look at your problem? — Vinc199789, Jun 27 '15 at 09:29
@Vinc199789 it's not a coding issue, this is how mobile devices work, i'm trying to understand why. the only code i can offer is — Apollo Creed, Jun 27 '15 at 09:35
That line makes every pixel the same size to keep it short. Take a look here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag — Vinc199789, Jun 27 '15 at 09:36
@Vinc199789 it does not make it 1-1, it makes it 1-0.6, why is this common practice? — Apollo Creed, Jun 27 '15 at 09:38
If I comapare the code from the mozilla site your missing something. You have `` and mozilla has `` — Vinc199789, Jun 27 '15 at 09:39
So what exactly is your question? Do you wish to get an **explanation** for why your mobile device is not showing your website at 1080px width as you see on desktop, or you want to know **why the images did not get resized**, or you want to know **why you need to add `` with those attributes**? — Billy, Jun 27 '15 at 10:34
Or are you expecting a 16px font to be rendered at 16 _hardware_ pixels? That would be quite unreadable. — Mr Lister, Jun 27 '15 at 18:09
@Billy >Do you wish to get an explanation for why your mobile device is not showing your website at 1080px width as you see on desktop, yes, this exactly, I'd like to know why "initial-scale=1" does not render a 1-1 scale and why this is so commonly used. If my Monitor (pc) is 1920x1080p and my phone has the same dimensions, why do they render websites differently? — Apollo Creed, Jun 27 '15 at 18:47
@MrLister, are hardware pixels on my phone different that pixels on my pc? — Apollo Creed, Jun 27 '15 at 18:48

score 3 · Accepted Answer · answered Jun 28 '15 at 03:03

3

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.

answered Jun 28 '15 at 03:03

Billy

1,031
8
15

thanks! I didn't realize there was a standard viewing size that was trying to be achieved. – Apollo Creed Jun 28 '15 at 06:09
Without any meta commands, most mobile browsers do NOT zoom out completely to show a wide page in its entirety. The user has got to do some pinching themselves. – Mr Lister Jun 28 '15 at 06:15
@MrLister : Thanks for the info. Based on my experience, if the webpage is around 1000px wide or less (common few years ago before responsive design became mainstream), all mobile browsers do zoom out to fit the full width onto the screen and I thought that's the case. Do you know under what circumstances will that not work, and what other ways to force scale-to-fit when that happens? – Billy Jun 28 '15 at 06:39
Yes, the OP appears to have a page 1920 pixels wide, and pages like that are not displayed at full width in most mobile browsers. – Mr Lister Jun 28 '15 at 06:48
@MrLister : Hmm...I don't see anywhere indicating that the page is 1920px wide. Anyway, assuming it's 1920px wide, is there any way to make it scale-to-fit on mobile devices' screen then? – Billy Jun 28 '15 at 07:12
@Billy The OP did say "1080p" which I took to mean "full HD" or 1920×1080 pixels. The same numbers came up in a comment as well. And I know that lots of phones have the same resolution, with a hardware pixel ratio of 3/1, giving them 640×360 CSS pixels, which would account for the 640px found in the question title... Anyway, I added another answer; hope it helps! – Mr Lister Jun 28 '15 at 12:00
@MrLister : Thanks, my understanding of that '1080p' was referring to the screen size instead of webpage width, so I thought all he wanted to do was to show his ~1000px wide page (usually) scaled down to fit on his 1080p screen. Also, thanks for the detailed answer regarding forced scale-down to hardware pixel. – Billy Jun 28 '15 at 12:49

score 2 · Answer 2 · answered Jun 28 '15 at 11:55

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.

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

2 Answers2