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"> 

Comments

  1. User Avatar
    Kenrick Beckett
    Permalink to comment#

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

  2. User Avatar
    Cody Robertson
    Permalink to comment#

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

  3. User Avatar
    Benjamin Mayo
    Permalink to comment#

    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. User Avatar
    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.

    • User Avatar
      Pete Robie
      Permalink to comment#

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

  5. User Avatar
    Missy
    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.

    :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag