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

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

• javascript
• html
• web
• portrait

Share Improve this question Follow edited Apr 29, 2015 at 14:22 StevenZ asked Apr 29, 2015 at 14:04 StevenZStevenZ 7,12355 gold badges1818 silver badges1919 bronze badges 2

• 1 take a look at this other question: stackoverflow./questions/3501510/… – rvandoni Commented Apr 29, 2015 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 Commented Apr 29, 2015 at 14:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

try this;

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