How would I lock the orientation for a mobile device using js, phaser or jquery? Is there a generic way to do it so it locks orientation regardless of the platform or device used?
I basically want to lock landscape mode for my browser based game.
There is a forceOrientation and a forcePortrait method in the ScaleManager class. See docs.
We also usually use an image to ask the users to flip their phones.
As well, you can listen to the incorrectOrientation signal so know when the game is in the undesired orientation.
I hope it helps :)
You can also do it using Intel XDK
intel.xdk.device.setRotateOrientation("landscape");
intel.xdk.device.setAutoRotate(false);
Related
I am developing a mobile web app. Is it possible to prevent orientation change? I want only portrait view. I was looking for some JavaScript solution, but could not find one. I am just using jQuery (no jQuery mobile). Thanks in advance.
Well the title is self explanatory.There are many guides for phonegap - cordova but none for a steroids project.
Does anyone have any idea on how to accomplish orientation lock in an android app?
AppGyver employee here – I just wrote a quick device orientation guide about the issue. Hope this answers your question!
so locking the orieb=ntation is independed of plugin you are using. Just lock the orientation in adroid app in manifest/Mainclass.
Lock screen orientation (Android)
Programmatically lock into portrait mode for certain operations
My web application has to support multiple devices. I have written common css for all mobile pad devices, but it is giving some issues on iPad. I found the fix specifically for iPad.
Now I want to separate out css for iPad and galaxy device.
Is there any way to in media queries or any other way to load one css for ipad and another for galaxy device ?
You can do combinations using media queries to detect the device and target your CSS. Devices have a specific set of properties (resolution, orientation, width, height etc.) which you can use media queries to pick them out. Here's MDN's reference and another article for further reference, as well as a similar question
The only media query you can use is the one ask about the size of screen if this isn't enought for some reason (maybe screens are same size or you must know the model) you can work with this script to identify the device and load the relevant css according to the device.
You can very simply detect http request user agents for iOS devices like iPad or iPhone, by comparing them with regular expressions, and include relevant CSS accordingly.
A simple regular expression to detect iPhone/iPad would be :
(iPhone|iPad).*?OS ((\d+)_(\d+))(?:_(\d+))?
if, by 'the fix specifically for iPad', you mean a fix to the installed Safari instance - you should use feature detection.
it's most easy to do so using a designated JS library, i prefer Modernizr.
I'm building an app in the browser for the iPad and was wondering if it's possible to lock the orientation of the viewport? I've checked apple's documentation and the only thing I've found says orientation is read only: https://developer.apple.com/documentation/webkitjs/domwindow/1632568-orientation
I'm thinking this means that there is no way to lock the orientation in the browser. Anyone got any ideas?
No. I guess this would appear too restrictive to the user, so you can only detect UI orientation. The only way to lock the orientation would be the exterior switch on the side of the device.
See this answer for code to detect it. You could also just use window.orientation to get it.
For my webapps, I simply have a popover-view that alerts the user to rotate their device when its orientation is not desirable. You might even consider two UI setups for different orientations for a more customizable experience.
Does anyone know how to either lock Mobile Safari's orientation to portrait, or to block landscape (via javascript or otherwise)?
In other words, I want the web page to remain in portrait mode regardless of the orientation of the device.
You cannot lock orientation in iPhone's Safari browser. You can only detect it and make appropriate changes to your page.
I don't, but...
Consider very carefully whether this is a good idea or not. Personally I'm more often annoyed by the autorotation than not, especially when browsing in bed and the like. However, this should really be the user's own choice. It also looks like the next revision of iPhone OS will contain a software orientation lock, so that the user can disable autorotation at will.