Can I force iPad to show website only in Landscape mode?

Question

I want to force an iPad to show a website only in landscape mode?

Is this possible?

My guess would be to use media queries to show/hide content based on width. But that's a shot in the dark. Can you provide more details? — trnelson, Oct 31 '14 at 15:27
if screen.height > screen.width show icon to turn ipad to landscape? — Stefan, Oct 31 '14 at 15:27

score 4 · Answer 1 · answered Oct 31 '14 at 15:30

You can set it with CSS:

 @media only screen and (orientation:portrait){
    html body * {
         display:none;
    }

 }
 @media only screen and (orientation:landscape){
   /* your CSS */
 }

In the portait mode all elemnts will be hidden. You can set a <div>Switch to landscape</div> to be only displayed in portait mode

score 2 · Answer 2 · answered Oct 31 '14 at 15:54

Safari's interface will still be in portrait mode and it's having issues with setting the height to 100% but you could rotate the entire html element when in portrait mode like this

html, body {
  height: 100%;
}

@media screen and (orientation: portrait){
    html {
        -webkit-transform: translateY(-100%) rotate(90deg);    
        transform: translateY(-100%) rotate(90deg);
        -webkit-transform-origin: left bottom;    
        transform-origin: left bottom;    
    }
}

Or see http://codepen.io/ckuijjer/full/Frosl

Can I force iPad to show website only in Landscape mode?

2 Answers2