jQuery - is there a way to lock screen to current orientation after loading the web page?

StackOverflow https://stackoverflow.com/questions/21200285

Question

I feel its a simple question and im thinking i cant find an answer because 1. I'm not good enough at finding things 2. Nobody has thought of it yet or 3. it just cant be done and im out of my mind!

either way some input would be nice. im building a web app that uses jquery ui's drag and drop feature, the problem lies when the user decides to go portrait instead of lanscape or viceversa.

My idea is to be able to load the page in whatever orientation the device is being viewed in, and then lock it to the current orientation. if there is a way to do this it would be a lot quicker than trying to re position draggable elements on orientation change, although at this stage of the game any solution would be a good one

Was it helpful?

Solution 2

Unfortunately the only way to lock the screen orientation on a device is by making an application wrapper for it and handling it through native code. There are no capabilities for the HTML/DOM to set this behaviour as of yet.

OTHER TIPS

To more concisely answer your question, no. Unfortunately, it isn't possible to lock a browser into a certain orientation. You just have to take steps to make sure that the user experience is good in either orientation and that it transitions nicely between them. There are lots of resources out there to help you learn to detect and handle orientation changes. I don't want to endorse any particular solution, but a quick Google search will give plenty of good results.

You can detect orientation on page load using this 

var portrait = false;
if(window.innerHeight > window.innerWidth){
    portrait = true;
}

Then based on that bool value you can determine the the logic of your app, the css rules to load, etc. Example:

 if(portrait)
     $(".mainDev").addClass("port");

For CSS, you can create two sets of styles for each orientation.:

.mainDev.port .menu {width:300px}
.mainDev .menu {width:600px}
.....

Assuming you have a containing div for your app with a class "mainDev".

The idea that them being portrait or landscape is actually irrelevant. The height of the screen won't affect the layout because it will scroll with it. The width of the screen will be your best identifier.

You need to use @media queries to determine screen orientation

CSS

@media (min-width: 480px) and (max-width: 599px) { 
    ... CSS rules for portrait ...
}
@media (min-width: 600px) and (max-width: 960px) { 
    ... CSS rules for landscape ...
}

And I would suggest using percentages for elements ( width: 25% ) and auto heights ( height: auto ) on things that don't specifically need something defined.

Also utilize box-sizing: border-box; on your elements to ensure borders, padding and margins are accounted for when determining element sizes.

A List Apart: Responsive Web Design

  • One of my favorite articles to explain this in detail (very enjoyable to read)

Example page grid in ALA article

  • Re-size the browser width to witness the changes.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top