Geek Answers Handbook

Media tablet and below

I know how to do media queries for portrait pills, and the other for phones. But is it possible to have only one media query for everyone: a portrait and tablet 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? */
+6
source share
2 answers

No.

Why?

iPads and iPhones are different devices with different screen sizes, 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 classified as a tablet, the iPhone is mobile, and so you can never use a single multimedia query to fully satisfy both or create the perfect experience for both devices.


What can I do?

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

  • Mobile / smart phone
  • Tablet
  • Desktop

The underlying theory is that you need your website or application to use / view on as many devices as possible, so standardize your approach, rather than skipping many individual devices and / or manufacturers.

A rough 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 opinions vary widely regarding the best breakpoints between the three types, and I know that research / data on such breakpoints will be widely welcomed by the development community.


What if I want to specifically target iOS devices?

Can you do this. Several people have suggested media queries that meet the specific requirements of specific iOS devices (not tested, but I often saw along with the links listed 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 */ }

Other iOS-specific efforts of others:

General link:


Caveat

I used one example above, but media queries can be applied in several 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" />
+12
source

Take a look at Detectizr ( https://github.com/barisaydinoglu/Detectizr ), this is Modernizr ( http://modernizr.com/ ).

This JS will add CSS classes to the html tag so that you can target devices without media queries. For example: .phone {} or .tablet {}

0
source

More articles:


All Articles