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.
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...
I don't quite understand what the window.devicePixelRatio value is, and how it dictates what size image (2x, 3x, etc) I need for that device.
For instance, on an iMac 5K Retina (Late 2015), I'd expect the pixel ratio to be at least 3 or so, but it's actually 2, the same as an iPad Air and iPhone 6s. Does that mean it prefers a 2x bitmap? 3x?
devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on a given device. You can think of dips as what the display "acts" like.
For example: a non-retina 27" iMac has a width of 2560 physical pixels. Everything is displayed 1:1, so it's also 2560 dips wide, so the devicePixelRatio is 1.
On your retina 27" iMac, the width is 5120 physical pixels. But the display "acts" like it's only 2560 pixels wide, so that everything is shown at the same physical size as the non-retina iMac. Therefore, it's still 2560 dips wide, so the devicePixelRatio is 2 (5120 / 2560), and you would serve 2x images.
(You can look up what the dips values are for your system – if you have a retina display – by going to System Preferences > Displays > Display and switching the Resolution toggle to Scaled, then hovering over the different options. For Default, on the 5K iMac, it'll say "Looks like 2560 x 1440").
To date, standard practice for graphics destined for Retina displays is still to provide an image that's twice the usual, non-Retina size.
Reminder: it is good "bandwidth hygiene" to serve an image only as large as needed for the current user's device size and resolution. Solutions to that are outside the scope of this question.
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.
i am learning web designing this days and come across the following problem, it will be my pleasure if you can solve it.
While designing a site i placed an image in background it looks nice on my system but on other big screens image looks small and shows white space around it so all that i want to know is what size of image i should select and what properties of css i need to apply?
for more infomation i am using 15" computer screen n problem occurs when i view my site on 17" system.
Waiting for your reply.
Your 15" screen is probably running 1024x768 resolution which is fairly small compared to the most common monitor sizes you will come across. I did a quick check in Google analytics for the most popular browser sizes wider than 1024x768 and came up with these common sizes -
1280x800 (typical widescreen 15" laptop)
1366x768
1280x1024 (typical q7" and 19" monitor)
1440x900
1680x1050
What I usually do is select a pretty large image, then do a radial gradient fade to the background color. Depending on the complexity of the image, I will often use an image that is 1600px wide so that it covers all but the very largest screen resolutions. Then place the image centered at the top of the page. Here is the CSS -
BODY{background:URL(image/url/goes/here.jpg) center top no-repeat;}
With a little practice you should be able to make the image blend in to the background nicely so it looks good on very large screens as well.