I recently started to step in responsive design. I used http://responsivepx.com/ to test how my design will look on every screen resolution. I have a mobile phone (galaxy prime core) which according to that site it's 480X800 screen resolution. The thing is, I tried to set a breakpoint on (min-width=480) px but my phone didn't respond to that breakpoint. After further testing, the phone responded to the breakpoint when I set (min-width=320px) it didn't respond when I set it (min-width:321px) so I figured my phone's actual width was 320 in pixels ...
my question is : what does that mean and is there a way to calculate it or is it just width - 160 ?
Device width (value your browser sees and you use in media queries) is not "width - 160", it is "physical width / device pixel density". Your phone's is 150%, so it is 480 / 1.5 = 320.
For nice overview of common screen resolutions of mobile phones I'd suggest http://screensiz.es/phone.
I think you can find a list of the most commom devices on the internet. I don't think you can do it for ALL the mobiles (there are thousands) but a lot of resolutions are the same. here is a website with some info (in spanish): https://norfipc.com/celulares/medidas-pantalla-resolucion-telefonos-celulares-tabletas.html
and here is a picture with others: http://www.destacaimagen.com/wp-content/uploads/responsive-web-design-chart1.jpg
Related
Consider a smart phone with screen resolution 1440 x 2960 pixels. Now if I do a CSS mobile query like #media(max-width: 500px), then even though it is a mobile device it won't satisfy the media query.
But it does. Consider this website Loruki, it has the same media query of max-width of 500px, yet it works like a mobile based web page when opened from 1440 x 2960 device.
How does pixel and media query work?
You are confusing screen resolution with screen width
i.e. A phone's screen width is usually around 200 to 500 CSS pixels.
This famous blog post explains why there was the need for this being introduced: a pixel is not a pixel
Medium also has an excellent explanatory article on the topic.
For high resolutions screens, the so-called device-to-pixel ratio is greater than 1. To calculate the CSS pixel width, this is the formula:
CSSPixelWidth = DevicePixelWidth / DevicePixelRatio
When doing media queries in CSS I noted that the value in pixels that is used for min-width and max-width when working on mobile do not seem to correlate to the device's actual width.
For example, if I was to target a landscape iPhone 5 I could use max-width:568px and it gets triggered but if I google iPhone 5 resolution I see that its long side is actually 1136px.
Why is half the device's resolution being used in media queries?
More importantly, how can I stop this from happening while still using the same queries for desktop?
First of all, take a look at this chart chart here. In the terms of that chart, this happens because iPhones (and other phones as well) render points to the several rendered pixeles (so called "device-pixel-ratio").
Sometimes it even gets a little more confusing, because some devices uses upsampling or downsampling techniques to fit the physical display size.
For example:
IPhone 5s
Points: 320 x 568
Rendered pixels: 640 x 1136
Device pixel ratio: 640 / 320 = 1136 / 568 = 2
In your queries you should use points (320 x 568) as your measurement.
This article, where you can find resolutions of different devices, can be very helpful as well.
I can not resist to mentions, that it is a good practice to make breakpoints based on a content rather than targeting specific devices. See #DaveEveritt's post.
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 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
If I set my screen resolution to 1024 * 768, does that mean my website can be 1024 pixels wide?
If so then why does an image 1024 pixels wide cut off the page?
http://stevenportfolio.servehttp.com
If your screen resolution is 1024x768, that means that your screen is 1024 pixels wide. The available space for a web page is probably a little less, since scroll bars and window borders take up some space.
The short answer is no. A screen resolution of 1024 x 768 means that your screen is displaying 1024 pixels horizontally and 768 pixels vertically. When you view your web page, though, you aren't always using 100% of those pixels. For example, the scroll bar in your browser takes up some of those pixels or if the browser is not maximized then you may only have half of the screen.
You should never design a website that relies on the screen being a particular resolution for several reasons:
Not all your users have the same screen resolution
Even if you try to find the resolution with JavaScript or some similar hack, it may or may not be reported correctly (plus your website shouldn't require JavaScript to work)
The browser window may or may not be maximized
Try to come up with a design that is flexible enough to scale for any standard screen size and remember to test your site frequently on different screen sizes, browsers, operating systems, and resolutions. (You can use browsershots.org if you don't have multiple computers handy.)