Grow your CSS skills. Land your dream job.

Last updated on:

iPad-Specific CSS

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

Comments

  1. No Biggie. But you’re missing a closing slash on your second comment line.

    Thanks!

  2. Permalink to comment#

    I’d love to see a screencast on designing for an iPad
    i’m sure it’s like the iPhone one you made but still…

  3. This CSS will also be used by *all small screens* – this might be undesirable since often the CSS issues (such as position fixed) may not apply to netbooks for instance where the browser and os may be different to an ipad….

  4. Ira
    Permalink to comment#

    I’m wondering, why would the device-width = 768? Why doesn’t it equal 1024?

    • 1024px is the longest side, 768px is the shortest side, therefore you want to make sure the CSS will work on the iPad’s shortest side too. It is iPad specific.

      The min width 481px to max width 1024px is so the CSS works in the set orientation on any device between the pixel widths iPhone and iPad in this case.

      Hope that helps.

    • WA
      Permalink to comment#

      It depends on the orientation of the device (Ipad), whether it is a vertical or a horizontal one. Therefore, Vertical orientation would have a width of 768 and a height of 1024, as for horizontal the width would be 1024 and height 768.

  5. Permalink to comment#

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
    }

    is going to give you some problems with newer Android devices. Found that in order for Portrait styles for iPad not being getting picked up by my Galaxy S2 device was to use:

    @media only screen and (device-width: 768px) {

    }

    Instead.. I know its not really a solution, but it needs to be noted.

  6. designer
    Permalink to comment#

    This code doesn’t seem to do anything for me.. what am I doing wrong?

    #page {
    	/*standard layout*/
    	margin: 2em auto;
    	width: 994px;
    	border:4px;
    	border-style:solid;
    	border-color:#ffffff;
    }
    @media only screen and (device-width: 768px) {
      /* For general iPad layouts */
      #page {
    		display:block;
    		position:absolute;
    		left:50%;
    		top:30px;
    		margin-left:-500px;
    		width: 994px;
    		border:4px;
    		border-style:solid;
    		border-color:#ffffff;
    	}
    }
  7. Permalink to comment#

    @designer: Try doing this: #page @media only screen and …. { .. }

  8. Permalink to comment#

    Is there anyway to test the css if you don’t have an iPad? Something like IE tester for Mobile? Tried http://ipadpeek.com/ but it doesn’t apply the styles.

  9. Permalink to comment#

    Thanks for the tip on the snippet code, I did not realize tha it was this easy. :-)

    For those of you who are trying to get the above code to work on ipadpeek.com, there are a few things you need to do first.

    1. insert the following meta tag at the top of the html page just below the opening tag.

    2. When you are ready to view your site, you will have to change the monitor resolution to 1024×768 and refresh the ipadpeek.com web browser page.

    • Permalink to comment#

      Sorry for the double post, but the tag code did not show in the above post.

      here is the meta tag I was refering to.

      <meta name="viewport" content="width=device-width" />

  10. Stephen Marx
    Permalink to comment#

    @media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
    {
    /* Your iPad specific rules here */
    }

  11. @media only screen and (device-width: 768px)
    {
    #background img {
    display: none;
    }
    /* Your iPad specific rules here */
    }

  12. Wow, quick and easy fix! Thanks for sharing this technique, it saved me a huge headache.

    Thanks!

  13. Tom Harker

    What about ipad 3, that has a higher definition than 768px

  14. SirKay
    Permalink to comment#

    Tested it on the ipad 3, works fine
    (this one worked:

    @media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
    {
    #background img {
    display: none;
    }
    }

    )

    • adasdasdas
      Permalink to comment#

      @SirKay
      you so cool! that code u’ve give is work 100%. thanks.

  15. Dave
    Permalink to comment#

    I have a related question. The answer might involve using the media query described in this post (or something else). If your page content is less than 1024px in height, is there a technique to make the footer adjust so that the footer background (color or image-repeat) goes all the way down to the bottom of the page when it is viewed in portrait on the ipad? I assume this is a standard problem but I haven’t seen any solutions for it. I’m thinking the footer is the most obvious div to adjust, but there could be some other technique or div that “saves” the design in this use case. Any suggestions would be greatly appreciated.

  16. sabrina
    Permalink to comment#

    Should I use

    plus
    @media only screen and (device-width: 768px)
    {
    #background img {
    display: none;
    }
    /* Your iPad specific rules here */
    }
    or could I do without this code?

    • sabrina
      Permalink to comment#

      for some reason this code meta name=”viewport” content=”width=device-width” didn’t appear in the blank areas above

  17. Permalink to comment#

    Wow! been searching for days how to fix this issue, now everything works on ipad without messing up the site in other browsers.

    Realy thank you for this post!

  18. Permalink to comment#

    Has anyone tested these code tips on the new larger Samsung phones?

  19. Yama
    Permalink to comment#

    Thanks guys, for those want to use it inside JavaScript
    if (window.matchMedia(‘only screen and (device-width: 768px)’).matches)
    {
    // ipad… maybe run some small-screen related dom scripting?
    }

    if (window.matchMedia(‘only screen and (max-width: 480px)’).matches)
    {
    // smartphone/iphone… maybe run some small-screen related dom scripting?
    }

  20. Heiner
    Permalink to comment#

    Perfect. Saved me a lot of trouble in a project short before going live!

  21. Permalink to comment#

    Safari has been discontinued on Windows and the remote inspection stuff is only in version 6+ (which is not available for Windows).

  22. Rahsaan
    Permalink to comment#

    Any Idea how to design a div.scroll to show the scroll bar on the ipad. Currently this CSS trick does work with a two figure scroll , which is fine with me. I really want the scroll bar to be visible on the Ipad so the user knows that their is content to be scrolled through?? Any help would be greatly Awesome!

  23. Rams
    Permalink to comment#

    Strangely this didnt work for me, at all.

    Kept digging and found a way that did, hop this helps someone:


    @media screen and (max-width:480px) {
    /* Making the headings red for smartphone users */
    h1 {
    color: red;
    }
    }

    @media screen and (min-width:481px) and (max-width:1280px) {
    /* Making the headings Black targeting PC Users */
    h1 {
    color:green;
    }
    }

    @media screen and (min-width:1281px) {
    /* Making the headings red for smartphone users */
    h1 {
    color: black;
    }
    }

  24. thanks for quick and easy way :)
    sorted the issue I was having.

  25. Poonam jaiswal

    why would the device-width = 768? Why doesn’t it equal 1024?

  26. Guillermo
    Permalink to comment#

    Sorry guys, but this makes no sense!

    There’s a lot of devices that’s make use of 480px or 1024px, so this css affects all, not only Ipad devices.

    • Erasmussen
      Permalink to comment#

      I totally agree with you.
      What do you think about php device detection and adding isTablet / isMobile / isIpad … in body class and apply css style like this :


      // I use nested css rules with compass

      body.isIpad{<br/>
      // Your iPad specific rules here <br/>

      @media only screen and (orientation : landscape) {<br/>
      // Your landscape iPad specific rules here<br/>
      }

      @media only screen and (orientation : portait) {<br/>
      //Your portait iPad specific rules here<br/>
      }

      <br/>}

    • Ramses
      Permalink to comment#

      Erasmussen, does this work out of the box? AND with all iPad devices? Im sure u can add more specific detail to your code. Like the difference in addressing an ipad 2 of ipad retina.

      If you know how I for one would appreciate a fully working code so I can learn from it, because I am having a hard time figuring the responsiveness out. Thank you.

    • Erasmussen
      Permalink to comment#

      Ramses,

      For device detection I am using this php class : http://mobiledetect.net/ really simple and complete. You can detect mobile, tablet device and the type of device : Blackberry, Samsung, Asus or …iPad.

      I let you see the documentation. My html code looks like :

      <?php 
      require_once 'Mobile_Detect.php';
      $detect = new Mobile_Detect;
      
          // Test if current device is iPad
      $isiPad = ($detect->isiPad()) ? "isiPad" : "";
      ?>
      
      <!-- Add class isiPad if iPad device detected or "" if not -->
      <body class="<?php echo $isiPad;  ?>">....
      

      Then in css you can use the previously code I sent and add the css-tricks gived here : http://css-tricks.com/snippets/css/retina-display-media-query/ :

      //  /!\ Be careful here is SCSS code, no CSS. CSS compilation is necessary /!\
      
      body.isIpad{
          // Your iPad specific rules here
      
          @media only screen and (orientation : landscape) {
              // Your landscape iPad specific rules here
          }
      
          @media only screen and (orientation : portait) {
              //Your portait iPad specific rules here
          }
      
          // Retina specific rules 
          //(please to you refer to css-tricks link for details)
          @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      
              @media only screen and (orientation : landscape) {
                  // Your landscape Retina specific rules here
              }
      
              @media only screen and (orientation : portait) {
                  //Your portait Retina specific rules here
              }
          }
      }
      

      This is maybe not the best way to do… but it works good for me.

  27. fjpoblam
    Permalink to comment#

    When “retina” displays came out, I decided to quit fitzing around with pixel counts and trying device-aspect-ratio instead. I’ve had good luck with 3/4 (or 4/3, depending) for iPads, and…so far…40/71 for my iPhone (¡!)

  28. ritu.hemnani2606@gmail.com
    Permalink to comment#

    Hello,
    as we are defining this for media scree,
    Can we define page layout for font size also.
    Like my i am looking my page desine output in ipad, but when i increase or decrease the font size- the layout does not show the flow of content in proper way,
    Is there any solution, that we can define for font size;
    like-
    @ media screen if font size: 10 – 50%
    page will look like..

  29. Permalink to comment#

    Hello everyone,
    Im not much into coding, but I am trying to get rid of many css included in my html when viewed by a mobile user agent, my website run under wordpress and I have installed the wptouch plugin for my mobile visitors, this plugin deactivates the effect of most of the other plugins installed in the theme (I don’t mind it). The problem is that I can see the css of all those plugins still loaded (with no effect on design) which slow down the pageloading on a mobile device. Is there a way to avoid they load if the user agent is a mobile device?

  30. Permalink to comment#

    PS. support from wptouch team sucks, unless you pay them for pro version

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".