What devices / recommended sizes should I target media queries?

Question

I am new to responsive web design and am confused because there are different preferences regarding which media queries to use and which devices to target. Is there a standard? I would like to target iPhone, iPad, and other popular devices.

I found this on the internet:

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 and high pixel ratio devices ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

But I do not know if it is out of date. I don’t know which rule is for iPhone 4 because I ran the iPhone simulator and the CSS didn’t work (referring to the last CSS rule).

Answer 1

My thought with media queries is that your goal should be to create an agnostic device device for your site. This means that it should be both resolution and pixel density, given that Apple (and others) click on high-resolution screens.

2018 : my approach now reduces the attributes of screen and min-device-pixel-ratio media files and uses screen size ranges. Since all devices are now registered as screen , and almost all of them have high resolution now - you really don't need these attributes. If you are on a site with a high level of traffic, perhaps they still make sense.

Here's how I lay out my breakpoints around the world:

 /* Below 380px is really just the iPhone SE at this point */ @media (min-width: 380px) and (max-width: 480px) { /* Most phones fall in here - iPhone, Galaxy, Pixel, etc */ } @media (min-width: 480px) and (max-width: 768px) { /* Phablets and Tablets - iPad, Galaxy Note, Pixel Slate, Fire */ } @media (min-width: 768px) and (max-width: 980px) { /* Small desktop, large tablet - Macbooks, sub 12" ultrabooks */ } @media (min-width: 980px) and (max-width: 1200px) { /* Medium screen desktop (up to about 24") and laptops (13" laptops) */ } @media (min-width: 1200px) and (max-width: 1600px) { /* Large screen desktop (27"), laptops (15+") */ } @media (min-width: 1600px) { /* Very large screen, 4K desktop + small TVs */ } 

2012 Recommendations: I saw how this dual mandate from Chris Coyer is achieved. CSS-tricks.com: http://css-tricks.com/snippets/css/retina-display-media-query/

The concept is to create starting breakpoints based on size, and then media density queries with pixel density will follow. This approach gives you three breakpoints, and each breakpoint has a pixel density setting.

Here is a sample Coyier code (I have simplified vendor-specific prefixes so you can understand the concept):

 @media only screen and (min-width: 320px) { /* Small screen, non-retina */ } @media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */ } @media only screen and (min-width: 700px) { /* Medium screen, non-retina */ } @media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) { /* Medium screen, retina, stuff to override above media query */ } @media only screen and (min-width: 1300px) { /* Large screen, non-retina */ } @media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px){ /* Large screen, retina, stuff to override above media query */ } 

I really like this concept: you save bandwidth for older, most likely bandwidth limited devices, by providing the new high-resolution devices that they need. The only code you would need to place in multimedia pixel density queries should be the background image material, so higher resolution images overlap its pixelated copy on older devices.

Understand that you are trying to get into my friend’s moving target;) This is an evolving concept, css-tricks.com, stackoverflow and other blogs are the best way to keep up. Good luck.

Answer 2

Breakpoints in your layout can quickly become obsolete as new devices with different viewing ratios appear on the market. Perhaps, instead of focusing on specific devices, I prefer the approach of using breakpoints in your design where you want them to break, rather than tying your design to specific devices.

This article: A device-independent approach to responsive web design explains this better than I ever could.

In addition, you can turn to some of the most popular environments, such as 320 and Up or Twitter Bootstrap - they are updated very often and should provide you with a good starting point with media query breakpoints.