'Resolution' seems to be often used as a term to describe viewport dimensions/device pixels expressed in terms of a x b:
e.g. 960px x 640px (for iPhone 4)
However from what I understand that's a bit of a misappropriation as used in media queries, at least, resolution denotes the density of pixels of an output device.
Can I confirm that the media feature 'resolution' is essentially expressing pixel density?
i.e. the diagonal pixel resolution of the display divided by diagonal size (in inches)
So, taking the example of the iPhone 4 again, the resolution would be defined as 330 ppi? (or 330dpi)
I'm essentially interested to know whether the resolution feature could be used to target a device(s) with specific pixel density.
In Brian LePore's
article he suggests mobile devices round the actual dpi value to "120 DPI for a low density screen, 160 DPI for a medium density screen, 240 DPI for high density, and finally 320 DPI for extra high density".
Is this correct and would that mean that you can't actually target a specific dpi?
i.e.
#media screen and (resolution: 330dpi) {}
and
#media screen and (resolution: 311dpi) {}
will ultimately both be treated as /rounded to
#media screen and (resolution: 320dpi) {}
Yes, resolution is definitely expressing pixel density.
If you want to be as targeted as possible for iPhones, you might try using several of the available queries, and setting the values specifically to iPhone specs.
iPhone 5 would be something like this:
#media screen
and (-webkit-min-device-pixel-ratio : 2)
and (device-aspect-ratio : 40/71)
and (device-height : 568px)
and (device-width : 320px)
You can test media queries of different devices by going to the page http://pieroxy.net/blog/pages/css-media-queries/test-features.html on that device. The only strange result I'm getting is that it doesn't return a resolution value for iPhone 5. However, I'd be surprised if the above query targeted anything other than iPhone 5. (Sorry I don't know more specifics about resolution to answer your second question.)
More info at:
MDN: Media Queries
iPhone 5 CSS media query (device-aspect-ratio for iPhone)
Media features for common devices
Related
When breakpoints are set in CSS for responsive web designs, media queries check the width of a device so that different layouts can be appropriately displayed. As I thought I understood it, the pixel units in the media queries were referencing the rendered pixel resolutions that we commonly see in device specs. For example, the iPhone 5 at 640 x 1136px or the Nexus 5 at 1080 x 1920.
But now I’m confused about whether breakpoints are instead meant to reference a device’s points (for iOS) or density-independent pixels (for Android).
This question largely stems from how I’ve often seen common breakpoints referenced, with buckets defined for phones, tablets, and then desktop screens. This, for instance, is from Bootstrap’s documentation:
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
But wait a second. The Samsung Galaxy series has a few phones nowadays whose resolutions are 1440 x 2560. With the breakpoints above, these higher-resolution phones would be treated like desktops, wouldn’t they? Even the iPhone 6 Plus would qualify as a desktop. That can’t be right.
And while I know it’s best practice to define breakpoints based on content and not the device, the Bootstrap example is representative of a seemingly widespread idea that there ought to be breakpoints for portrait phones, landscape phones, tablets, and desktops … but a single bucket for all portrait phones doesn’t make sense if we’re talking about rendered pixels, because there’s so much device size diversity in that category alone!
Finally, I also found this kinda related post, which encourages setting the viewport meta tag so that “the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.” (Emphasis is mine.) So to return to the Bootstrap example, even though the unit says px, it could actually be referring to pts or dps?
All of this – plus a parallel investigation of mine into the concept of designing in 1x to 4x for different screen densities – has got me completely spun around on what feels like it ought to be a basic issue. Am I making this out to be more complicated than it is? And dps and pts relevant only to native development and not responsive web design? What units exactly are media query breakpoints referencing?
From the very same post you referenced in your question:
Stack Overflow– “Should I use max-device-width or max-width?”
In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.
So to answer your question, pixel-based media queries– combined with the correct <meta name=viewport> tag settings –will reference rendered (as opposed to actual) pixels.
I'm trying to make sense of CSS media queries for a mobile-only page. My final goal is to have the font size on my page be about the same in physical units (inches/centimeters) regardless of decice physical size and resolution. But what I see reported by the media queries has nothing to do with the device specs.
I'm testing on an HTC One M7, which is 1080x1920, 467dpi - manufacturer specs.
The precise numbers reported by the media queries is:
width (as reported by min-width/max-width): 1080px
resolution (as reported by min-resolution/max-resolution): 288dpi or 3.0dppx
First, shouldn't the pixels reported for the width be in logical pixels, not physical? I mean both iPhone3GS and iPhone4 report a width of 320px, even though the latter is actually 640 physical pixels. See How to target iPhone 3GS AND iPhone 4 in one media query?
How should I know what the browser meant by "pixel" when it matches a given query?
Second, the reported 288dpi has nothing to do with the actual device 467dpi. And how is this 3dppx calculated?
This is an interesting question. I'm familiar with the way media queries work for iOS devices, but less so with Android devices. I'll take a stab at it anyway.
Let's start with dppx, which you probably know is a measurement of how many physical dots fit into each pixel (let's use your terms "physical pixels" and "logical pixels"). 3dppx means that each of the screen's logical pixels is composed of a 3x3 grid of physical pixels. To use iOS terminology, your display has a #3x resolution, like the iPhone 6 Plus.
You can see a list of various device dppx values here:
http://bjango.com/articles/min-device-pixel-ratio/
(The site refers to -webkit-min-device-pixel-ratio, which predates dppx, but I think means exactly the same thing.)
If you know a device's physical width and dppx you can use the following formula to calculate its logical width, which you can use in media queries:
device width / dppx = logical width
For your device this should be:
1080 / 3 = 360
I would therefore expect the following media query to target your device in portrait mode:
#media only screen and (max-width: 360px) { }
As for the 288dpi: A 1dppx device has 96dpi, and 3 x 96 = 288. I'm not sure where the manufacturer's 467dpi comes from, but it doesn't seem relevant to writing media queries.
This question already has answers here:
CSS media queries for screen sizes
(3 answers)
Closed 8 years ago.
I want to test a website on a plasma screen. This screen is 55 inches wide, but has a resolution of 1024x768. So for testing purposes, I changed my laptop's resolution from 1600x936 to 1024x768, and the site that was being tested displayed the same results.
I want to be able to target this 1024x768 screen resolution (not the device width or max, or min-width) via media queries.
Can someone please help me with this? Again, my laptop is 17 inches widescreen, and the default display is 1600x960. I want to test a website for responsive design for 1024x768 resolution. Need an appropriate media query for that.
I think this might be what you want: http://www.broken-links.com/2012/07/13/using-media-queries-to-test-device-resolution/
Edit:
I don't believe this is a duplicate, as it deals with the need to target the resolution and specifically NOT the device size.
Anyhow, click on the link above for a full analysis of this problem, but basically, I'll paraphrase here.
You can use the devicePixelRatio property to find out the DPR of your current device; unfortunately it’s not supported in Firefox for some reason, but it’s in all other major browsers:
console.log(window.devicePixelRatio);
Once you have your DPR (I’m going to use 1.5 as an arbitrary number throughout this article) you can start using it in your media query logic.
#media (-webkit-min-device-pixel-ratio: 1.5) {}
All of this being the case, the minimum number of media features you need to test for device resolution across the major browsers is two:
#media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {}
I am looking to make my websites appear the same size on retina and other higher resolution screens that they do on standard screens. That is to say make them optically look the same but with more detail on the higher resolution screens.
So if we had a screen with four times the number of pixels per inch then I would want the height and width of elements to be twice the normal CSS pixel measurements as well as doubling the font size.
I looked into this and it appears that the solution detects the DPI and then loads different CSS.
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
The thing is these screens all have different DPIs.
iPhone 4/4S and iPod Touch (4th generation) -- 326
iPad (3rd)/4th generation) -- 264
MacBook Pro with Retina Display 15" -- 220
MacBook Pro with Retina Display 13" -- 227
So if we had a an element with a height of say 24px. I would like it to adjust its height to accurately fit whatever the pixel ratio is. IE. do the Maths and do it for all elements.
You leave the image dimensions untouched, you just give it the appropriate source.
You can also put different queries in, see here:
http://css-tricks.com/snippets/css/retina-display-media-query/
I would recommend that you read about both dpi and dppx. When you look at Retina displays you need to think about both CSS-pixels and physical pixels, as I'm sure you know.
If you want to have the componenets of the website appear in the same physical size, then I think dpi is the way to go but and add different CSS for the different dpi levels you want to cover bu if you want to differentiate between Retina and normal display you need differentiate between dpi and dppx (dots-per-physcial-inch)
These articles both helped me:
https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
http://drewwells.net/blog/2013/working-with-dppx/
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