Is it possible to only show a website if the device is landscaped?

Question

I'm new to whole HTML/CSS game and just looking for a bite of advice. So basically, when a user loads my website, if the device is in portrait mode, I want a message to appear asking them to view it in landscape. I won't this to apply to all smartphone and all tablets, but not desktop screens. Is this possible? I know it involves @media queries but I've seen alot of differing approaches. Do you have any suggested resources which might help me with my task?

Thanks very much!

http://stackoverflow.com/questions/13646497/ipad-portrait-orientation-css-only-landscape-will-work — putvande, Feb 10 '14 at 13:56
http://stackoverflow.com/questions/8738072/forcing-web-site-to-show-in-landscape-mode-only — Matheno, Feb 10 '14 at 13:56
While both of the answers here should work, I think a better answer would be "Don't do that, try to look into a more flexible/responsive design instead". — apaul, Feb 15 '14 at 12:26

score 3 · Answer 1 · edited Jul 30 '21 at 08:56

3

If you can use jQuery (JavaScript), there is an orientation change event that fires whenever the orientation changes. There, you can show your "error" message covering the whole screen.

Here is the event: jQuery orientationchange event

If you only need to check it once at the beginning you can go as easy as:

if(window.innerHeight > window.innerWidth){
     //your code
}

edited Jul 30 '21 at 08:56

Xiddoc

3,369
3
11
37

answered Feb 10 '14 at 13:56

javirs

1,049
26
52

Thanks dude, I'll check that out, was meaning to look into javascript/jquery so here's my excuse! – Og O'Reilly Feb 10 '14 at 14:07

score 0 · Answer 2 · answered Feb 10 '14 at 14:02

I would recommend using a media query to detect the high not the form factor. Most devices (iPhones and some android browsers) do not support the handheld media type. You could just display something different if the width is not big enough to display your normal site.

Something like this

<div id=main-content> <!-- your content goes here --></div>
<div id=not-wide-enough>If possible turn your device to landscape</div>

CSS

#not-wide-enough {
  display:none;
}
@media all and (max-width:300px) {
  #not-wide-enough {
    display:block;
  }

  #main-content {
    display:none;
  }
}

Is it possible to only show a website if the device is landscaped?

2 Answers2