1

if you open this website on your mobile phone in portrait mode:

http://432parkavenue.com/

You get what seems to be an Overlay notifying you that you have to rotate your device in order to view the website properly.

How is this basically realized by CSS / HTML or Plugins?

Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
Chris Bean
  • 21
  • 1
  • 2
  • 7

4 Answers4

0

I'm not sure exactly how that site does it, as i'm on mobile, so no devtools. ;)

But it's easy enough using JavaScript to check whether the height is greater than the width, a signature of portrait mode.

if (window.innerHeight > window.innerWidth) // display the overlay
Scimonster
  • 32,893
  • 9
  • 77
  • 89
  • That'll also display on a tablet or desktop is the width is smaller than the screen's height – Daniel Gelling Oct 30 '14 at 10:58
  • True, but perhaps there too you need a wider screen. – Scimonster Oct 30 '14 at 11:00
  • Thanks for the quick reply! I would not have needed a precise analysis on how this site does it. I did in fact struggle to understand the overall procedure on acknowledging the rotation of the screen itself :) – Chris Bean Oct 30 '14 at 11:03
0

demo - http://jsfiddle.net/victor_007/4862j3ne/1/

you can use a @media queries to detect the width and show the div

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
      div{display:block}
}
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
0

I used this to adjust images on a mobile version of a small website when changed to and from landscape mode:

$(window).on('resize orientationchange', function () {})

2 different events due to differences in browsers (theres a few more Im sure)

C Jones
  • 231
  • 1
  • 3
-1

Please use below snippet of code. I hope this will work..

if(window.innerHeight > window.innerWidth){
    if(window.innerHeight < "600"){
        alert("Please use landscape!");
    }
}

Thanks

Udit Bansal
  • 41
  • 3
  • There's an implicit conversion from string to number in your comparison, which is not a good practice and can lead to errors. Also, if you are using a high-DPI screen (normal on mobile devices) the window height in portrait mode will probably be greater than 600 pixels. – Tiago Marinho Oct 30 '14 at 11:27