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.
Related
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" />
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 rewrote my web site to be formatted for mobile devices. However, the display width is inconsistent on different devices. On my android device the width looks fine but on another person's android device the width is much smaller and therefore unreadable.
I use the following viewport in my html file:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" /
This is my main div in the html page:
<div id="maindiv" style="margin-left:1.0em; margin-right:0.5em">
Do I need to put a width paramter in my main div? Or can anyone tell me what I should do to ensure a uniform body width for mobile devices?
you'll need to build a responsive site. If you have fixed widths on divs you'll need to use css media queries. Since IE 8 and older don't support media queries you can use a plugin like respond.js. With this plugin you'll only need to add it to your page and use media queries like you normally would.
Do you have a link to the site?
Media queries can be used for targeting specific browser/device width so you can style things only when the browser/device meets that media querier specification.
However, if you change #maindiv width to 100% or use max-width, I believe this will fix your problem. Also in an external style sheet or on the page you'll want to add the following css to make your images responsive:
img {
max-width:100%
height:auto;
display:inline-block;
}
Also remove:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" />
and put:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">
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.