I didn't have this problem on previous versions of Phonegap. But in 2.2, when I change the orientation, it doesn't update the uiwebview.
Does phonegap not support landscape view by default? How do you handle this?
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" />
To add to Stephan's answer, if you need to do anything special when the orientation changes, you can set a callback function to:
window.onorientationchange
I have also have same issue in ios phonegap ....
Just go and update x-code project file (IOS Application target ) change or update support interface orientation and check it all orientation .
it's work well ...
window.addEventListener(
"orientationchange",
function() {
// Announce the new orientation number
location.reload();
}, false );
Related
With latest Cordova on iOS 8.1, it seems I cannot prevent the keyboard to shrink the view height.
I've tried the following settings:
in my config.xml:
<preference name="KeyboardShrinksView" value="false" />
in the index.html viewport tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
or
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
or
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
None of these disabling the shrink behavior.
How could I prevent the keyboard from shrinking the view on iOS?
I'm experiencing a very different problem. I can't get cordova to resize the webview like it used to anymore ^^.
with regards to
<preference name="KeyboardShrinksView" value="false" />
This is disregarded on ios7 and higher in the org.apache.cordova.labs.keyboard plugin.
The code states:
// No-op on iOS7. It already resizes webview by default, and this plugin
// is causing layout issues
// with fixed position elements. We possibly should attempt to implement
// shrinkview = false on iOS7.
if (!IsAtLeastiOSVersion(#"7.0")) { ... }
I suspect the culprit/savior is in the meta tag. That's where I'm going to look.
Currently mine looks like this:
'<meta name="viewport" content="width=' + viewPortWidth + ', user-scalable=no, initial-scale=1, maximum-scale=1' + extra + '"/>'
where viewPortWidth is dependent on the device, in case of an iphone it's 320, and extra is target-densityDpi=device-dpi in case it's android
Hope it can help you a bit
I just create a IOS Phonegap app using Terminal, then change
UIWebViewBounce t= false in config.xml, and delete all contents inside
body, and delete all CSS data.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
</head>
<body>
</body>
</html>
This is my HTML page, my index.css is empty and my Phonegap version is 2.4. Then I run the app:
When I try to scroll the empty page, a scroll bar appears:
Why? Can anyone please help me?
**UPDATE Solved : just remove height=device-height from meta tag OR Remove status bar **
Yes, This is due to the device status bar, me also faced this issue, it will take almost 20px of window height. Better make sure that you have checked "Hide status bar" option in xcode Targets.
None of these solutions worked for me. I had to manually disable the iOS's WebView's ScrollView's ScrollIndicator, in the XCode project.
self.webView.scrollView.showsVerticalScrollIndicator = NO;
I'm working with the iOS simulator, it rotates fine, but unlike android the webview doesn't seem to re-size automatically. The orientationchanged event fires but I'm not sure how to handle refreshing the page. I can't do a whole page refresh, although it does solve the problem, since I'm using the multi-page JQmobile template. Any thoughts on other ways to re-size? I've tried $.mobile.trigger('pagecreate'); and pageshow.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0 target-densityDpi=device-dpi" />
have you kept this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
in <head> of the index.html in IOS it will automatically resize when device rotated.
Is there any way to prevent the application from zooming? My app has this annoying habit of zooming all way in when you focus on a text input (only on Android, using an HTC amaze).
Sure:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
I'm building a PhoneGap + JQuery Mobile app, but I can't seem to prevent it from zooming in with a double click. I followed the tips listed at http://www.tricedesigns.com/2012/01/17/mobile-web-phonegap-html-dev-tips/, specifically by adding:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Does anyone know of a solution for zooming?
Try:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
This is what I use and I don't get any zooming behavior.
Here is the Apple documentation for the viewport meta tag: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Place "user-scalable=no" in to your meta tag
like this
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
This is the best way to stop zoom in mobile, Its work for me in phonegap
The accepted solution does not seem to work in iOS10, this does:
// stop ios bounce and zoom
document.ontouchmove = event => {
event.preventDefault();
};
This will stop move events reaching the root element/browser