I have built an app using build.phonegap.com (phonegap version 3.6.3). While testing the app on devices I am unable to scroll vertically on my iphone with a single finger, it requires 2 fingers to scroll. However on ipad I am able to scroll on 1.
This is my viewport meta tag
<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" />
Answered: It was because I had height: 100%; on the div I wanted to scroll!
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 was struggling with having 2 finger events on touch devices.Finally I removed all the meta tags from my Html and it made the Android device to work , however I still have problem with iPad.
I read all the other threads about zoom in and tried different variation of this meta tag :
<meta name="viewport" content="
user-scalable=yes,
width=device-width,
initial-scale=1.0, maximum-scale=3.0, minimum-scale=0"/>
but none of them helped have scroll on iPad.
when I have this :
<meta name="viewport" content="user-scalable=yes" />
I get zoom on Android but still no 2 finger pinch or scroll on iPad.
I appreciate any help or suggestion on that.
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 );
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"/>