A Web Design Community curated by Chris Coyier

Code Snippets Gallery

Code Snippets > CSS > iPad-Specific CSS Submit one!

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

2 Responses

  1. Chikezie says:

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

    Thanks!

  2. adam says:

    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…

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.