Media query tablet portrait and below

Question

I know how to do a media queries for tablets portrait and another for phones. But, is it possible to have just one only media query for all: tablets portrait and phones ?

/* tablets portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : portrait) { 

}

/* phones */
@media screen and (max-device-width: 640px) { 

}

/* tablets portrait and phones 
Is it possible to have only one media query for this that do the same than the other media queries together?
*/

Answer 1

No.

Why?

iPads and iPhones are different devices with different screen dimensions, resolutions and different pixel densities (based on different versions/releases - see here).

Device                     Screen(res)   CSS pixel ratio
iPad   (generation 1,2)    1024 × 768    1
iPad   (generation 3,4)    2048 × 1536   2
iPhone (gen 1,3G,3GS)      480 × 320     1
iPhone (gen 4,4S)          960 × 640     2
iPhone (gen 5)             1136 x 640    2

The iPad is classed as a tablet, the iPhone a mobile and thus you'll never be able to use one media query to fully satisfy both or create an ideal experience for both devices.

What can I do?

One solution is to offer a fairly common approach and provide media queries for 3 levels of device-type and/or screen width/orientation:

• Mobile/smart-phone
• Tablet
• Desktop

The underlying theory being that you need your site or app to be usable/viewable on as many devices as possible, so standardise your approach instead of missing the plethora of individual devices and/or manufacturers.

A crude example might be:

@media screen and (max-width:500px) {
   /* Mobile styles */
}
@media screen and (min-width:501px) and (max-width:999px) {
   /* Tablet styles */
}
@media screen and (min-width:1000px) {
   /* Desktop styles */
}

But views differ widely as to the best breakpoints between the three types and I know research/data on such breakpoints would be widely welcomed by the developer community.

What if I want to target iOS devices specifically?

You can do this. A few people have proposed media queries that meet the specific requirements of specific iOS devices (not tested, but that I've seen frequently along with the links I list below):

/* 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 */
}

/* iPhone 4 ----------- */
   @media
   only screen and (-webkit-min-device-pixel-ratio : 1.5),
   only screen and (min-device-pixel-ratio : 1.5) {
   /* Styles */
}

Further iOS-specific efforts by others:

• CSS Media Queries for iPads & iPhones
• Basic iPhone And iPad Screen Component Pixel Dimensions
• ios-test.css - media queries for iOS devices
• SO question: iPhone 5 CSS media query

General reference:

• Media query features (at W3C)
• Wikipedia entry
• Responsive design testing tool

Caveat

I've used one example method above, but media queries can be applied is a number of ways:

@media screen and (max-width:500px) { ... }
@import url(mobile.css) (max-width:500px);
<link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="mobile.css" />