Code Snippet

Home » Code Snippets » CSS » iPad-Specific CSS

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

Subscribe to The Thread

  1. Chikezie

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

    Thanks!

    Reply ↓
  2. adam

    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…

    Reply ↓
  3. web-engineer

    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….

    Reply ↓
  4. Ira

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

    Reply ↓
    • Chet Tailor

      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.

  5. @johnsin

    @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.

    Reply ↓
  6. designer

    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;
	}
}
    Reply ↓
  7. molbal

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

    Reply ↓
  8. Tim

    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.

    Reply ↓
  9. chris

    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.

    Reply ↓
    • chris

      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

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

    Reply ↓
  11. Vincent Barnhard

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

    Reply ↓
  12. brandon

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

    Thanks!

    Reply ↓
  13. Tom Harker

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~