I have a Surface Pro 3 device, which recommend resolution is 2160x1440
But when I try to get resolution using javascript window.screen.width and window.screen.height
the result is 1440x960;
Why the Microsoft doesn't show its true resolution, and why the result is 1440x960?
It's because CSS pixels are not equal to Device pixels.
Related
I'm a bit confused about how device screen emulation works in chrome and how to use it to write affordable media-query. e.g.
IPhone X
Real device screen-size: 1125x2436px
Emulated device screen-size: 375x812px
I know that a resolution like that easily take two full-hd screen to be shown at 1:1 scale with the actual monitor resolution (pixel density), but the emulated res is not simply the result of a zoom-out, because if I zoom in or out the view, pixel size is about the same, and this make me think that chrome is suggesting me that the emulated resolution should be my reference for layout, like it is the real-device res.
But if it is, how this resolution is calculated? Why I should use this instead of the actual device screen-size?
While phone screens are usually high resolution like Full HD or Quad HD, their browser viewports are not, instead they are the resolutions Chrome shows you in the developer tools.
This helps you when setting up your CSS media-queries as you don't have to handle every single resolution of every specific device.
But if it is, how this resolution is calculated?
It is just a scaled down version of the actual screen resolution for that given device.
Why I should use this instead of the actual device screen-size?
Because the actual resolution of the viewport is that one and not the device screen size.
You can read more about this here: https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
I'm a bit confused about CSS pixels and whether they translate into pure resolution or physical width of devices.
My question is, will content displayed on a 1080p 13 inch laptop be the same as content on a 4k 13 inch laptop? Or will everything be scaled down?
(I'm using (max-width)/(min-width) media queries and not (max-device-width)/(min-device-width)
I'd be glad if you guys could clear this up for me.
Yes, it should render the same.
CSS uses “px” to relate “...the pixel unit to the reference pixel...”, thus a single CSS “px” could represent more than one physical pixel as different devices (ie. HD vs. 4K) have different pixel densities.
A single “px” in CSS should always be about 1/96 of an inch though. You may see variations in rendering based on browser rendering and/or monitor resolution quirks.
For most cases, desktop and laptop displays will use the same pixels their resolution is set to for CSS pixels. In these cases, a 4k 13" laptop without scaling will display more content, at a smaller physical size, than a 1080p 13" laptop.
That said, there are some cases where this isn't quite true. With mobile devices the browser will use a scaled down resolution so that elements are rendered at a more natural physical size. This scaling can be determined by the devicePixelRatio - which is the ratio of physical pixels to CSS pixels.
Further reading about devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
Details on sizes for mobile devices: https://mydevice.io/devices/
I am developing my website's design, and unfortunately I don't have a 4K monitor at the moment, but I want to see how will my website look at that resolution.
I am worrying because my website's background image has 2560 x 1600 resolution and CSS parameter background-size: cover;. I hope it won't have black background-color around the image, just because the image is smaller than 4K.
So is there any way to simulate a 4K resolution on PC?
You can use Mozilla Firefox to do the same.
Press Ctrl+Shift+M and firefox shall switch to 320 X 480 Resolution, Now you can edit the values in top and set it to 4096 X 2160 to emulate 4k resolution.
You will get both Horizontal and Vertical Scrolls
Below is the sample Screen for Same :-
You can test inside a VM with the VM set to have a higher res than your real screen:
https://techcommunity.microsoft.com/t5/windows-dev-appconsult/testing-application-on-various-screen-resolution-s/ba-p/316796
this is mentioned every article about mobile web, but nowhere I can found an explanation of what exactly does this attribute measure.
Can anyone please elaborate what does queries like this check?
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
//high resolution images go here
}
Short answer
The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.
Physical resolution: 960 x 640
Logical resolution: 480 x 320
The formula is:
Where:
is the physical linear resolution
and:
is the logical linear resolution
Other devices report different device pixel ratios, including non-integer ones. For example, the Nokia Lumia 1020 reports 1.6667, the Samsumg Galaxy S4 reports 3, and the Apple iPhone 6 Plus reports 2.46 (source: dpilove). But this does not change anything in principle, as you should never design for any one specific device.
Discussion
The CSS "pixel" is not even defined as "one picture element on some screen", but rather as a non-linear angular measurement of viewing angle, which is approximately of an inch at arm's length. Source: CSS Absolute Lengths
This has lots of implications when it comes to web design, such as preparing high-definition image resources and carefully applying different images at different device pixel ratios. You wouldn't want to force a low-end device to download a very high resolution image, only to downscale it locally. You also don't want high-end devices to upscale low resolution images for a blurry user experience.
If you are stuck with bitmap images, to accommodate for many different device pixel ratios, you should use CSS Media Queries or the HTML picture Element to provide different sets of resources for different groups of devices. Combine this with nice tricks like background-size: cover or explicitly set the background-size to percentage values.
Example
#element { background-image: url('lores.png'); }
#media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url('hires.png'); }
}
#media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url('superhires.png'); }
}
This way, each device type only loads the correct image resource. Also keep in mind that the px unit in CSS always operates on logical pixels.
A case for vector graphics
As more and more device types appear, it gets trickier to provide all of them with adequate bitmap resources. In CSS, media queries is currently the only way, and in HTML5, the picture element lets you use different sources for different media queries, but the support is still not 100 % since most web developers still have to support IE11 for a while more (source: caniuse).
If you need crisp images for icons, line-art, design elements that are not photos, you need to start thinking about SVG, which scales beautifully to all resolutions.
Device Pixel Ratio == CSS Pixel Ratio
In the world of web development, the device pixel ratio (also called CSS Pixel Ratio) is what determines how a device's screen resolution is interpreted by the CSS.
A browser's CSS calculates a device's logical (or interpreted) resolution by the formula:
For example:
Apple iPhone 6s
Actual Resolution: 750 x 1334
CSS Pixel Ratio: 2
Logical Resolution:
When viewing a web page, the CSS will think the device has a 375x667 resolution screen and Media Queries will respond as if the screen is 375x667. But the rendered elements on the screen will be twice as sharp as an actual 375x667 screen because there are twice as many physical pixels in the physical screen.
Some other examples:
Samsung Galaxy S4
Actual Resolution: 1080 x 1920
CSS Pixel Ratio: 3
Logical Resolution:
iPhone 5s
Actual Resolution: 640 x 1136
CSS Pixel Ratio: 2
Logical Resolution:
Why does the Device Pixel Ratio exist?
The reason that CSS pixel ratio was created is because as phones screens get higher resolutions, if every device still had a CSS pixel ratio of 1 then webpages would render too small to see.
A typical full screen desktop monitor is a roughly 24" at 1920x1080 resolution. Imagine if that monitor was shrunk down to about 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small. But manufactures are coming out with 1920x1080 resolution phone screens consistently now.
So the device pixel ratio was invented by phone makers so that they could continue to push the resolution, sharpness and quality of phone screens, without making elements on the screen too small to see or read.
Here is a tool that also tells you your current device's pixel density:
http://bjango.com/articles/min-device-pixel-ratio/
Boris Smus's article High DPI Images for Variable Pixel Densities has a more accurate definition of device pixel ratio: the number of device pixels per CSS pixel is a good approximation, but not the whole story.
Note that you can get the DPR used by a device with window.devicePixelRatio.
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
Gives the number of device pixels per CSS pixel.
this is almost self-explaining. the number describes the ratio of how much "real" pixels (physical pixerls of the screen) are used to display one "virtual" pixel (size set in CSS).
Device Pixel Ratio has direct correlation with Pixel density of the device.
Best concise description I could find:
Purpose of DPR is to keep consistent size of CSS pixels and therefore
consistent size of letters, symbols, images and everything else on
screen, across a variety of devices with different physical pixel
densities.
Source: screenresolutiontest
I need to put in my site div which is exactly 25cm width ( 10 inch) in every display. How I can do it ?
You can simply use the cm unit in CSS:
#mydiv { width: 25cm; }
Note that, as others pointed out, the result still depends on the correct reading of the monitor size by the operating system.
See the spec for more information.
How I can do it ?
You can't. Update: apparently, you can on many modern systems: Check out #Tomas's answer. It seems not to be always entirely reliable, though.
Old answer: You can't. Monitors display different numbers of pixels. The pixel size varies wildly from monitor to monitor.
There are ways to interpolate the pixel size if you know the monitor size. This information is sometimes available to the operating system; however, it is impossible for a web site to get hold of this information.
The only way to go would be to have the user do a calibration. For example, ask the user to hold an A4 piece of paper to the monitor, and use a draggable ruler to determine the area it covers. Using that information, you can then calculate how many pixels you will need to show 25 centimeters.
Update: #Tomas claims in his answer that using CSS cm values works on screen.
This is in fact true on my Windows 7 and 23" Plug&Play TFT Monitor (1920x1080 Pixels): 21cm translates perfectly to the short side of a A4 sheet of paper in Chrome 7, IE6(!), IE7, Firefox 3.6.
It doesn't seem to be entirely reliable, though: #Yi Jiang can't get it to work on a TFT using Ubuntu Linux; also, older Monitors may not send through their size information so it'll be impossible for the OS to determine a correct size.
Here's a simple JSFiddle for testing.
You can't. A program can only get the true physical dimensions of a screen by interrogating EDID as values returned by the Windows API are not reliable. A program can get the true values for resolution (e.g.1280 x 1024) and screen dpi, but browsers can't do any of this by themselves.
There is a constant confusion between the "physical dpi" of a screen and "screen dpi". The physical dpi, more properly called pixels per inch, is obtained by dividing the maximum pixel width of the screen by the physical (ruler) width in inches. The pixels per inch are fixed by the manufacturing process. The screen dpi is a number that the user can set via the Control Panel and it's only purpose is to convert a value in inches into a number of pixels. The user settable screen dpi value has no direct relationship whatever with the physical dpi (pixels per inch) and is just a number with a default value of 96. There is nothing magic about 96, or 120
Number of screen pixels = number of inches x screen dpi
It's as simple as that.
The reason 21 cm on a 23 inch monitor at 1920 x 1080 "translates" to the width of an A4 sheet (21 cm) is because with a 23 inch diagonal the screen width is 20.05 inches and at 1920 pixels across the pixel density is 95.76 pixels per inch.
With screen dpi default value of 96 then for one inch: pixels = 1 x 96 = 96 pixels
The pixel density of the 23 inch screen is 95.76 pixels per inch which matches the number of pixels you get, when specifying a length of one inch, with the default screen dpi value of 96.
If screen dpi is changed in the Control Panel, or the monitor video resolution is changed, then 21 cm would not match the width of a sheet of A4.
You will need to get hold of the resolution of the display and the dot pitch of the monitor to be able to calculate this.
Given these two values you'll be able to calculate the number of pixels you need.
However, you can't get hold of this information from a web site.
Given that you state it's a <div> in a site, we know you're in a web browser environment.
Sadly for you, the web browser doesn't have any way to find out the screen's DPI. You can find out what the screen resolution is, so you'll know whether the user has 1024x760 or whatever, but you'll never know whether those 1024x768 pixels are being displayed on an iPhone sized screen or a billboard, or anything in between.
Sorry about that.
I believe the layout engine would need to know three things to make this possible:
Screen resolution
DPI
Physical monitor size
As far as I'm aware, it doesn't know all three.