Indiana Jones and CSS3

Media Queries and the last CrossBrowser

  • Published on Monday, 18 November 2013 23:31
  • Hits: 3821
User Rating:  / 1

The title for this post remains about this movie where an intrepid Indiana looks for the holy grail to get that youth and beauty.

Well, let's say, with a bit of moderation, that Devices and Browsers look for the CSS Media Queries to get the best look&feel, be in shape in any screen size, in any orientation, and even in any particular Device.

Let me adapt one of the famous quotes from the movie "Indiana Jones and the last crusade" for the purpose of this article:

Browser Jones: Listen CSS3. Before I've met you I've nearly been disconfigurated, scrolled down, shitty, and chopped. We're caught in the middle of something magical here, my guess is customers look for more than the looked before and with you I'm sure, I'm going to continue to do things the way I think they should be done.

So let's start...what is a media query?? It is CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen), device aspect ratio, device orientation, ..and more. Sounds good, right?

 Let's review the main ones, least the most used ones:

  • width, height: Describes the width and height of the targeted display area of the output device.
  • device-width, device-height: Describes the width and height of the rendering surface of the output device.
  • orientation: media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
  • aspect-ratio: The ‘aspect-ratio’ media feature is defined as the ratio of the value of the ‘width’ media feature to the value of the ‘height’ media feature.
  • device-aspect-ratio: The ‘device-aspect-ratio’ media feature is defined as the ratio of the value of the ‘device-width’ media feature to the value of the ‘device-height’ media feature.

Besides these important ones we have a whole bunch of possibilities> color, color-index, monochrome, resolution, etc. and if you want to know about them just check in the W3C page

Now that you know the basis, ...let's make your web the right adjustments tot look awesome devices with the less code possible...


Basic CSS Media Query for mobile devices

Detect an IPAD in Landscape mode

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
css code for Ipad in landscape mode

Detect an IPAD in portrait mode

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px) 
and (orientation : portrait) {
css code for Ipad in portrait mode

Detect a desktop Computer

(min-width: 1080px) {
css code for a desktop


The real Basic, Small and Easiest CSS Media Query for any devices

..but if you really want to a short css media query for most of your needs i have this tip for you, the easiest you can find in all the web:

Mobile and Tablets in Portrait Mode

@media only screen and (orientation:portrait), only screen and (max-width: 480px), only screen and (min-device-width : 320px) and (max-device-width : 568px)  {
css code goes here...

Tablets in Landscape Mode and Desktops

@media only screen and (orientation:landscape) and (min-width: 850px) {
css code goes here...


Based on the Operating System

..hmmmm, maybe you still want to have some more specify styles. Now worries, what about the Operating System Based ones???. I must admit that I do no understand why some designers like to have different code based on the Operating System but hey, if you are one of them I have a bad new first which is that there are no medua queries to help with that, and then a good new which is that you can use javascript for that purpose:

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))  OSName="IOS";
if (navigator.userAgent.indexOf('Android') != -1) OSName="Android";


Apple, Apple and Apple

And last but not least, many designers like to enhance their sites for Apple device and here you have the definitive, stylish and detail guide for Iphones and iPads from Stephen Gilbert:

CSS Media Queries for 
iPads & iPhones it is time for you to get your site out of the temple of doom, out of the last ark, and take it to the last crusade with this css media queries ideas!!

Music You like..

IT News to be aware of ..

New in FreakZion...