How do I correctly detect orientation change using Phonegap on iOS?
This is what I do:
function doOnOrientationChange() { switch(window.orientation) { case -90: case 90: alert('landscape'); break; default: alert('portrait'); break; }} window.addEventListener('orientationchange', doOnOrientationChange); // Initial execution if neededdoOnOrientationChange();
PhoneGap: Device orientation under iOS
I just tried it and it worked fine. Be sure to set the correct options in XCode like this:
Before you do this you build a clear Project like this ->
cordova create OrientationChange com.example.com OrientationChange
cd OrientationChange
cordova platform add ios
cordova plugin add org.apache.cordova.console
(you don't need this for the orientation change but it's useful for debugging).cordova build
Run the Project in XCode (6.3 is the actual version) and give it a try - it should work!
Let me know if you need further help!
Cordova/Phonegap set different device orientation for different pages
You can use cordova-plugin-screen-orientation to do this.
Install it into your project:
cordova plugin add cordova-plugin-screen-orientation
Then programmatically lock the orientation as required, for example:
switch(page){
case 'page-1':
screen.lockOrientation('landscape');
break;
case 'page-2':
screen.lockOrientation('portrait');
break;
default:
screen.unlockOrientation(); // allow user to rotate
}
Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?
PiTheNumber's answer looks OK for those fine with modifying the Cordova-generated native code.
Following this JIRA issue on Cordova, and as neatly explained in this blog, you can also use plist values or define a window.shouldRotateToOrientation function in your Javascript code, which suits me very well.
window.shouldRotateToOrientation = function(degrees) {
return true;
}
This would enable device orientation for the current page (so, for your whole app if it's a "one page app" as most Cordova apps are). Note you can also decide to enable it based on the rotation value in degrees, or even, why not, enable it only on certain views, or letting the user choose within your HTML app... Nice, isn't it.
For the record, I didn't need to do anything to get an iOS 8 iPad handle rotation, while both iOS 6 and iOS 7 iPhones wouldn't handle it by default in the current Cordova version (4.2.0, cordova ios platform version "ios 3.7.0"). That is because one can grant different rotation settings per "device type" (tablet / phone) on Xcode. The thing to note is that Cordova will first check the JS function above if it exists, and then if the function does not exist or it did not allow the rotation, the Xcode rotation setting will be used.
phonegap 2.2 orientation change does not resize app
This is not an issue with the WebView getting updated but with the meta tag in the index.html's document head.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
After removing the unnecessary height=device-height
everything works just fine
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
Phonegap page has wrong rotation, shows as portrait in landscape mode
You can check the root Controller - shouldAutorotateToInterfaceOrientation, allow rotation for certain orientation. Hope it helps.
For example return true
in Classes/MainViewController.m
:
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
//return (interfaceOrientation == UIInterfaceOrientationPortrait);
return true;
}
Related Topics
Rails Js.Erb File Cannot Find Method "Render"
Using Ruby Variable in JavaScript (In App View)
"Uncaught Typeerror: A.Indexof Is Not a Function" Error When Opening New Foundation Project
Is There a Callback on Completion of a Css3 Animation
How to Access and Process Nested Objects, Arrays, or Json
How Do JavaScript Closures Work
How to Set Background Color of HTML Element Using CSS Properties in JavaScript
Jquery Counting Elements by Class - How to Implement This
Show Loading Image While $.Ajax Is Performed
Get a CSS Value from External Style Sheet With JavaScript/Jquery
Loading JavaScript into a Uiwebview from Resources
Er_Not_Supported_Auth_Mode - MySQL Server
Does .Css() Automatically Add Vendor Prefixes
How to Include CSS and Jquery in My Wordpress Plugin
Is Chrome'S JavaScript Console Lazy About Evaluating Objects
What Are the Rules For JavaScript'S Automatic Semicolon Insertion (Asi)