Grow your CSS skills. Land your dream job.

Last updated on:

iPad Orientation CSS

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

Reference URL

Comments

  1. This is pretty sweet wish i had an ipad to try it out on..

  2. Cody Robertson
    Permalink to comment#

    I would add a bit more queries to it. This would have the same effect on the iPhone.

  3. That’s what I’ve been looking for – I’ve thought it ridiculous that you need javascript to apply some styling based on orientation.

  4. Pete Robie
    Permalink to comment#

    Something to keep in mind is adding a check for the platform like below


    if(navigator.platform == 'iPad' || navigator.platform == 'iPhone') {
    document.write("");
    document.write("");
    }

    This way it doesn’t get loaded unless the platform matches.

    • Pete Robie
      Permalink to comment#

      in the “‘s place the LINKs as listed above. Not sure why they didn’t show. :-/

  5. Permalink to comment#

    I’m not a fan of this solution (sorry!) – especially as a well-constructed fluid layout wouldn’t need to make this distinction.

    With many devices now having native portrait and landscape modes, this is no longer just about catering to the iPad; it’s the physical width, rather than the orientation – that matters. @media queries are infintely more accurate and efficient if the CSS is well constructed.

    :)

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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