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.
Related
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" />
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
to prevent horizontal scrolling in my web pages, I have used 3 different stylesheets for mobile, tablet, and desktop devices. I try to tell the browser to use the proper css file with the following tags in the head of the html file:
<link href="static/css/cssL.css" rel="stylesheet" type="text/css" media="(min-width:1000px)" />
<link href="static/css/cssM.css" rel="stylesheet" type="text/css" media="(min-width:551px) and (max-width:999px)" />
<link href="static/css/cssS.css" rel="stylesheet" type="text/css" media="(max-width:550px)" />
by doing so, I expect the mobile browsers to use cssS.css. but when I checked the website in a Samsung mobile phone, It appears to be using cssL.css and shrinks webpage to prevent horizontal scroll bar. this way, texts are very small and unreadable.
is there anything wrong with the approach?
What am I missing?
thank you very much.
Try the below meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
Chrome on Android has an accessibility setting that allows users to zoom in and out even if the page requests that it not be zoomable. So you may have the user-scalable setting set as you want but the browser is ignoring you. Some accessibility proponents will argue that you should never disable zooming. http://adrianroselli.com/2015/10/dont-disable-zoom.html
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.