CSS media queries, pixel density, desktop and mobile devices
Add this to your head
:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width
takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).
How does CSS media queries based on pixels work with modern smart phones?
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
Media Queries: How to target desktop, tablet, and mobile?
IMO these are the best breakpoints:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Edit: Refined to work better with 960 grids:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
In practice, many designers convert pixels to em
s, largely because em
s afford better zooming. At standard zoom 1em === 16px
, multiply pixels by 1em/16px
to get em
s. For example, 320px === 20em
.
In response to the comment, min-width
is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.
Regardless of whether you prefer min-
, max-
, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.
Media queries and device pixel ratio
This question/answer may help you: Is there any equivalent to Android's <meta name='viewport' content='target-densitydpi=device-dpi'> for Safari on the iPhone? which in turn points to this very useful article: http://davidbcalhoun.com/2010/viewport-metatag
<meta name="viewport" content="target-densitydpi=device-dpi" />
Should make you aware that this seems to be a suitable solution for Android, but maybe not work on iOS devices (don't have a Mac or an iPhone to hand to confirm).
Related Topics
Why Does the CSS3 Pseudo ::Selection Not Change the Color for All Parts
Changing the Color of a Jquery UI Slider as You Slide It
Foundation 5 Build Isn't Complete
What Is the Purpose of Flex-Start and Flex-End on Justify-Items and Justify-Self
Use Linear Gradient in CSS to Split Div in 2 Colors But Not in Equal Halves
How to Change CSS Class for the Inputfield and Label When Validation Fails
How to Center Absolute Div Horizontally Using CSS
CSS Transform: Scale Does Not Change Dom Size
Does IE9 Not Support Display: Inline-Flex at All
Why Does Width/Height Work on an Inline Img Element
In CSS Grid Why Is 1Fr+9Fr Not Behaving the Same as 10Fr in Small Screen Sizes
CSS Variable Calculation of Hsl Values
Drawing Rounded Triangle with CSS
Is There a CSS "Haschildren" Selector
Using CSS to Transition the Fill Property of an Svg Path on Hover