Sunday, October 14, 2012

Media queries for iPhone 3,4,5 for landscape and portrait modes



If you want to have complete control over with version of the iphone you are displaying to.

This snippet should only display one of the divs (out of 6) that matches your phone and orientation.

This code sample has all 6 media queries you need for each iPhone and mode out there.
The viewport will fix the scale to 1 (ie, force the browser to not try to zoom in to fit), but will allow the user to scale it, which is nice for the user.

Posting here so everyone can benefit from my learning. Couldn't find a single place on the web that had this all in one spot. I have tested on iPhone 3,4,5, both landscape and portrait modes.

Enjoy.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
 
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1"/>
 
  <style type="text/css">
    div {
        display: none;
        font-size: 15px;
        color: #FF0000;
    }

    #title {
        display: block;
        color: #000000;
    }


    /* iPhone 3 portrait */
    @media (device-height: 480px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:portrait) {
        #iphone3_portait{
            display: block;
        }
    }

    /* iPhone 3 landscape */
    @media (device-height: 480px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:landscape) {
        #iphone3_landscape{
            display: block;
        }
    }

    /* iPhone 4 retina portrait */
    @media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) {
        #iphone4_retina_portait{
            display: block;
        }
    }
    /* iPhone 4 retina landscape */
    @media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) {
        #iphone4_retina_landscape{
            display: block;
        }
    }

    /* iPhone 5 or iPod Touch 5th generation, portrait */
    @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation:portrait) {
        #iphone5_portait{
            display: block;
        }
    }
    /* iPhone 5 landscape */
    @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) {
        #iphone5_landscape{
            display: block;
        }
    }
   
  </style>
</head>
<body>
  <div id="title">
    If displaying with a iPhone, only one of the following divs should show
  </div>
  <div id="iphone3_portait">
    This is the iphone 3 portrait
  </div>
  <div id="iphone3_landscape">
    This is the iphone 3 landscape
  </div>

  <div id="iphone4_retina_portait">
    This is the iphone 4(retina) portrait
  </div>
  <div id="iphone4_retina_landscape">
    This is the iphone 4(retina) landscape
  </div>

  <div id="iphone5_portait">
    This is the iphone 5 portrait
  </div>
  <div id="iphone5_landscape">
    This is the iphone 5 landscape
  </div>

</body>
</html>

1 comment: