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" />
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'm working on a phonegap application with builds for ios and android. Somehow the android build is acting strange. Randomly some font-awesome icons are not displayed properly. This only happens on the android build.
Font-awesome is being served from the local filesystem. I've done some research already.
font-awesome.min.css is linking to the correct font files.
I don't have any conflicting font-families in my css.
I'm using the correct font-awesome classes.
Font-awesome is in fact loaded correctly.
I'm hoping someone else had this issue before.
Here's my code that loads font-awesome.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" />
<link rel="stylesheet" href="css/font-awesome.min.css">
As you can see the font-awesome icons (top left and top right) are showing rectangles, however other font-awesome icons show properly.
Did some more testing and it seemed that for some reason font-awesome wasn't fully loaded or something. After changing some css in the inspector the css refreshed and then the icons would show correctly. I can't really pinpoint the exact cause, but it looks like it has to do something with cache. Instead of loading all the css in the head I placed the css on the bottom of the page. This fixed the problem! Tested multiple times now and the icons keep showing up correctly! Thanks for the help anyway.
This viewport is scaling down perfectly for iphones but it does nothing right but preventing the user to zoom on the site for android phones.
The site has 1080px width, how can I scale it down to 320px correctly?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />
i would say use css to over come this i had the same problem and i sorted it using css it does mean doing a bit more css coding but i think it would be your easier option in my work with IOS and android i find it easyer to worek with IOS as they not that far of desktop browser standards un like android
Try setting scalable to NO rather than 0;
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
this usually works for me.
Steve
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.