如何在移动Web应用程序中将方向锁定为纵向模式？

Question

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."

Answer 1

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.

Answer 2

try this;

$(window).on("orientationchange",function(){
 event.stopPropagation();
});