I'm trying to dynamically enable / disable user zooming in my Cordova 3.4.0 app.
My initial viewport settings are:
<meta id="viewport-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" />
When I enable zooming, I change to:
viewport.setAttribute('content', 'user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi');
Then, to disable zooming and revert to original size, I execute:
viewport.setAttribute('content', 'user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi');
Now, the problem is, after I manually pinch to zoom in when scaling is enabled, and when I try resetting the viewport to disable zooming, those initial-scale and maximum-scale do not take effect. Only the user-scalable takes effect, whereby I cannot pinch in / out anymore, but the page does not reset to the initial-scale / maximum-scale = 1, and remains at the zoomed level of say 2.
How do I force the page to zoom out again to the initial-scale of 1? Please advise. Thank you very much.
Phonegap and cordova always renders app as a webpage so it is really not necessary to add such zooming code in my opinion.Zooming must automatically work unless it is disabled in config file.
But if it still doesnt work.Here's a plugin you can use
http://cubiq.org/iscroll-4
This plugin can be applied to your div's that will give you this feature.
You can also use hammer.js which is a javascript library that gives these facility
http://eightmedia.github.io/hammer.js/
Related
Is there a way to scale the inital web view of InAppBrowser to a certain zoom percentage in Objective C for iOS development with the Ionic Framework? I was able to do it in the InAppBrowser.java class for Android with this line of code:
inAppWebView.setInitialScale((int)(60 * inAppWebView.getScale()));
Here is the documentation for InAppBrowser.java (this line of code is added after line 897):
https://github.com/apache/cordova-plugin-inappbrowser/blob/master/src/android/InAppBrowser.java
Have you tried using the viewport meta tag? It should set the initial zoom for all platforms according to its values as follows:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
I have always the problem that all the icons and font are displayed to high on the newer mobiles (Android 5+). I thought about the viewport and how to edit this that everything (every device) looks right.
My actual Viewport now is:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
What do I have to change to make the design, the look on every device equal. Maybe I also change something else?
I think my issue is similar to that referenced here:
Screen Resolution On A PhoneGap App
Basiaclly I have an ipad and an android tablet, both with resolution of 1024 across, yet my screen displays correctly on the ipad, yet on the android, some of my output is wrapped.
The solution recommended in the above post is to insert the following 'viewport' within the 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" />
I had this in originally, and the layout was the same but the fonts on the android were (almost) unreadable (9px ?) but were fine/readable on the ipad.
Can someone advise on where I might be going wrong? How can I ensure fonts are kept of similar sizes on both android and ios, and not have wrapping on my android?
Thanks!
Remove height and target-densitydpi from the viewport
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
I am developing an application using Phonegap with Jquery Mobile on Android Platform.
I designed a simple page. I haven't started any customization yet. But look at the below screens.
Screen 1: The page launched inside the PhoneGap in my android device
Screen 2: The same page launched as a .html page in the same android browser
See the size variations... Why it is displaying differently? Do I need to take some standard consideration while designing jQuery mobile pages for Phonegap?
What happens to be within your viewport meta tag?
For example, you might have something similar to:
<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" />
One of my application I was using this and it seemed to be "Zoomed out" similar to how your application seems.
To solve this, I just changed my viewport meta tag to:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
You should use font size in percentage format. that will work in any phonegap app..
example:
body{
font-size:200%;
}
Best way is to use the viewport units, such as vw and vh, which set the font-size of an element relative to the dimensions of the viewport.
I'm creating a app for Android and iOS using PhoneGap.
After creating the "HelloWorld" app from PhoneGap's template I could see the target-densitydpi=device-dpi on the viewport by default. Okay, that's fine for now but I decided to run some tests with JQuery Mobile UI and they do not use target-densitydpi on the viewport (by the way if I do, the website should look very small on high dpi devices).
Since I need the images of my app to look great at low and high resolution devices, I decided to run some tests on my Galaxy S4.
First, target-densitydpi=device-dpi removed:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
The document.width was 360px, so I created a 360px image and it was really blurry at my GS4 screen.
<img src="360img.jpg" style="width:360px;">
Second, target-densitydpi=device-dpi enabled:
<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" />
The document.width was 1080px, so I created a 1080px image and it was great at my GS4 screen.
<img src="1080img.jpg" style="width:1080px;">
Third, target-densitydpi=device-dpi removed with 1080px image:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
The document.width was 360px, so I used the previously created 1080px image and it looks great at the GS4 screen.
<img src="1080img.jpg" style="width:100%;">
I was able to get the same results on second and third tests, but, wich one is the best (or correct) way to work with PhoneGap Apps?
Thanks!
EDIT1:
I'm thinking about provide these images via API, where I can tell the size of the window to return the correct sized image.
window.width was 1080px at all tests, so return the correct sized image will not be a problem.
For icons, I'm considering SVG, then I don't need to create sprites for each resolution. I can resize de image via CSS or JavaScript and it should still looking good.
What made me think to don't use target-densitydpi=device-dpi was JQuery Mobile UI, they library is responsive and they don't use it, why?
target-densitydpi is not supported IOS and deprecated Android. So I suggest do not use it.