PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » CSS » iPad Orientation CSS

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

Subscribe to The Thread

  1. Kenrick Beckett

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

    Reply ↓
  2. Cody Robertson

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

    Reply ↓
  3. Benjamin Mayo

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

    Reply ↓
  4. Pete Robie

    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.

    Reply ↓
    • Pete Robie

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

  5. Missy

    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.

    :)

    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 ~