1

I am making a web application using html, and javascript for mobile devices (phones). How can I lock the screen orientation in portrait? Are there any extensions, or frameworks to do this?

EDIT: When the user goes into landscape mode, I want a only a div (in the shape of a box if it matters) to be displayed that contains the text "please turn your device to portrait."

StevenZ
  • 6,983
  • 5
  • 16
  • 18
  • 1
    take a look at this other question: http://stackoverflow.com/questions/3501510/blocking-device-rotation-on-mobile-web-pages – rvandoni Apr 29 '15 at 14:06
  • There is event to detect `orientationChange`. However locking the screen resolution is not a right option for a responsive website. Better handle it – Praveen Apr 29 '15 at 14:06

2 Answers2

3

You can use something like the following CSS media query:

@media screen and (orientation: landscape) {
   .main-content { display: none; }
   .use-portrait { display: block; }
}

Which would hide your main-content and show the use-portrait div when the device is in landscape mode. You can use some additional CSS to rotate the use-portrait div to further entice the user to do that:

.use-portrait {
  -webkit-transform: rotate(90deg);    
  transform: rotate(90deg);  
}

And you may need to translate it to appear correctly.

zpr
  • 2,886
  • 1
  • 18
  • 21
0

try this; 

$(window).on("orientationchange",function(){
 event.stopPropagation();
});
Hector .Barragan
  • 11
  • 2
  • It didn't work. Where would you recommend putting it. – StevenZ Apr 30 '15 at 18:03
  • This event exists in jQuery mobile and catches the same event as the CSS equivalent, so you can use it, but there is no valid `event.stopPropagation()` or `event.preventDefault()` which would make this work. You still need to write a custom solution, for which you can use the value of `event.orientation`. – zpr Apr 19 '16 at 21:02