When I use
.class { width: 800px; }
what does it actually mean?
When I view it on my laptop screen, it shows up exactly 800 pixels wide. When I view it on my tablet screen, it shows up as 1600 pixels wide. I am guessing because my tablet might have a higher pixel density. However, the physical (when compare side-by-side) width of the element if much smaller on the tablet than on my laptop
So, my question is: When I define a dimension in CSS to an HTML element, what is the reference? How is it computed or scaled on different displays?
The reference is a logical coordinate system that might be scaled in relation to the physical screen.
It's most common on a PC that the scale is 1:1. However as screens get larger it's becoming more common with computers that have scaled up display, which may also affect the browser.
The user can also zoom in the browser, which natually affects the scaling.
Devices like tablets and phones usually have a 2:1 scaling in the browser, sometimes even more. That means that the browser reports a smaller screen size, and everything is scaled up. This also affects the media queries, so even if the physical screen is larger, your CSS might not apply as the media query uses the screen size that the browser reports.
Also, if you don't lock the viewport using a meta tag, the mobile browser will scale the page to fit the screen, so whatever page width you specify will show up the same size.
Related
If you inspect body/html of this site (or any else) from dev tools you can clearly see width (x) of the page are 15-20% smaller compared to your screen resolution.
Where the difference come from ?
I understand why there could be a small differences +-50px coz of borders/scrollbars etc. of browser itself, but I'm sure they aren't 400 missing px wide.
I also checked if my browser settings is set to 100% scale
Calculated Sizes
It's pretty common these days to have calculated sizes, clamps, or min/max definitions. So, first thing to check is whether these are affecting the numbers you expect.
Pixel Density
Modern devices have different screen densities. Basically, this means more physical blinky lights are used to represent one "theoretical pixel", which allows for super high resolution rendering.
Mathmatecially, there will be a ratio of real pixels (blinky lights) to theoretical pixels, for example the iPhone 11 Pro has a 3x pixel density, and the Samsung Galaxy S10 has a 4x pixel density. This is "how many device pixels there are for each CSS pixel.
To look at this another way, the 1440 physical pixels on the Samsung represents 360 CSS pixels.
A full rundown is available in this article.
What is my phone real resolution? The resolution that CSS detects.
The phone is a Samsung S6. Its factory specifications show a resolution of 1440px x 2560px.
How ever when I use css #media(max-width:...px) to detect the screen resolution, the mobile browser acts as if it's somewhere between 768px and 991px width.
Using Google chrome inspection tool and toggling to mobile view, it shows that a Samsung S5 has a resolution of 360px x 640px.
So where is the real resolution in all of this?
Screen size and screen resolution are NOT the same. You seem to be confusing the two.
Google's web developer tools detect the screen size (as in the width of the screen) as opposed to the screen resolution.
Screen resolution refers to the clarity of the text and images displayed on your screen.
At higher resolutions, such as 1600 x 1200 pixels, items appear sharper.
To summarise; the google inspection tool picks up the physical screen size of devices and emulates them, it does not emulate the screen resolution which is essentially the quality of the output of text/images.
The accepted answer seems to be incorrect.
#OP here's what you need to know:
Screen size is the physical size of the screen, and is measured in inches.
Screen resolution is the number of pixels making up the screen, and is measured in pixels.
Your phone has a resolution of 1440x2560, as stated in the spec sheet.
So why does CSS act like the resolution is lower? It's because the contents of the screen that you are seeing on your mobile device are zoomed in.
This is done because showing text etc. at 100% size on a 1440x2560 display that is only ~6 inches would make the text so tiny as to be illegible.
So, if the amount of zoom is 200%, CSS thinks the screen is 720x1280. If 400% (as seems to be the case with your phone), CSS thinks 360x640. And so on...
My page has a width of 1920px on the body element. My 15" Macbook Pro supposedly has a resolution of 2880x1800. Why do I need to zoom out to see the entire page?
The pixel density of many modern screens is very high. If you viewed content intended for more traditional screens on them using native pixel resolution, you would end up with pin sharp text that was too small for most people to read.
Macbook Retina displays are, by default, scaled so software treats them as having a resolution of 1440x900. This means that 10px high text (for instance) uses 20 physical pixels and is still large enough to read, but is sharper than it would be on a screen with 1440x900 physical pixels.
(Started over my question because people downvoted and locked it because I didn't add pictures ... so here we go, since I got the answer from other sites, and this is actually important to large scale responsive sites, I also provide the answer)
I am trying to overcome the pixel density (real vs hardware) of viewports, that basically breaks/collapses Bootstrap sites even on huge tablets just because they have huge resolutions (alas, they default to a huge zoom, which causes bootstrap to collapse the content even though it would fit).
Here, Bootstrap own site, Desired effect:
But, instead, even on devices with higher resolution, I get this:
The reason is the viewport standard, that "enforces" a zoom according to dpi to prevent sites rendering too small (example: a 12px font on a 400dpi device would be almost unreadable). However, I would like to let the user decide if he wants to zoom or not, and not be constrained to the hardcoded zoom (example, my xperia Zq with 1920px have a hardcoded 220% zoom, leaving less than 900px of viewport, which will collapse bootstrap out of responsive mode).
Tips?
As per the specification of the viewport (which is still a draft but most certainly will become a standard soon, reference can be found here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag), if you set a fixed value to the viewport width, that does not mean the viewport will have THAT width, but that the viewport should have AT LEAST that width. So, for instance, if I set the viewport to 1000px, than the viewport WILL be enlarged to that size, causing a smaller zoom, and also causing bootstrap not to collapse.
As per the specification, if the device cannot enlarge the viewport to the requested size, it will enlarge to the maximum possible size (alas, the real pixel width of the device), but will still enforce a zoom, probably causing the collapse.
So, the solution to prevent the collapse on a site that can handle a screen, say, 768px (Bootstrap's definition of tablet), is:
<meta name="viewport" content="width=768, initial-scale=1">
This will prevent the collapse if the device have 768 or more real pixels, while collapsing otherwise, thus the site will show just like it would on a desktop if there is enough rooms.
why do that?(a.k.a. pros)
The mobile version on such high dpi devices will look like the desktop version and won't collapse even though it clearly can handle the site
The responsiveness will remain on those devices, instead of auto-collapse whatever mobile it is due to the high viewport constrains (often above 200% zoom), you are only changing the default "start zoomed" to "start unzoomed"
why not? (a.k.a. cons)
By reducing or disabling the zoom effect of the viewport, fonts and other components will render on "real size", which on a high dpi device might be too small (like a 12px font on a 400dpi is almost unreadable) - yet, the user still has the freedom do zoom in, which will cause the site to collapse as needed just like if you resize a window on the desktop version. This solution, therefore, does not break anything, just change the default behavior.
On really small but high DPI devices, this is still annoying since you will have to zoom every time, so the size you specify should really be the SMALLER possible size, and not just, say, force the device real pixel count and totally disable zoom
What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iPad?
I have gone through a lot of online resources, but am still unclear about it.
The visual viewport is the part of the page that’s currently shown on-screen.
The layout viewport can be considerably wider than the visual viewport, and contains elements that appear and do not appear on the screen.
Imagine the layout viewport as being a large image which does not change size or shape. Now imagine you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.
For a great treatment of the issue, see: http://www.quirksmode.org/mobile/viewports2.html
A very good explanation of the two is found here.
In summary:
Visual viewport
The visual viewport is the part of the page that’s currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.
Layout viewport
However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.
Thus the element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.
How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
In short, the layout viewport is generally the width of the viewport when the screen is zoomed all the way out.
Layout viewport
Its measurements are always the same regardless of orientation or zoom level, just depend on the device/browser window.
Visual viewport
It varies (when zoomed for example). This is the part of the page that’s actually shown on the screen at any given point.
Video example of both layouts
Layout viewport: The green area in the minimap.
Visual viewport: The red box in the minimap.
Layout viewport vs visual viewport (video)
On Mobile/Tablet devices
On mobile devices, things can be a little more complicated by default, because in order to allow a “full web” experience, many mobile devices return a fake higher layout viewport dimensions.
For example, the classic iPhone by default reports a layout viewport width of 980px. This means that if you create a 320px element on the iPhone, it will fill up only about a third of the screen real estate.
However, this mechanism is not so good for pages that are optimized for narrow screens using media queries.
When we are creating responsive websites is very useful to use the viewport meta tag, which lets us control the scaling and layout viewport of many devices (using the real dimensions, not the fake reported).
<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />
Examples of viewport meta tag
Tip: If you are browsing this page with a phone or a tablet, you can
click on the two links below to see the difference.
Without the viewport meta tag With the viewport meta tag