I'm developing app based on PhoneGap for Android devices. My app is working fine in AVD device (320x480), however in AVD with 720x1280 resolution (Galaxy Nexus) it displays layout's elements not properly, i.e. they are too small. Here is the LINK to screenshots. How can I fit the layout to the whatever device display?
AVD characteristics:
Eclipse Juno IDE
Java SE 7
Android SDK API 17
PhoneGap 2.7.0
jQuery 1.9.1 and jQuery Mobile 1.3.0
and here is the meta tags:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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'm really stuck and need to help. Thank in advance.
Please explain the results that you want to see and maybe I can give you a better answer.
You are dealing with different resolutions and pixel densities, so any elements that are of a fixed width and/or height are going to look differently. In the case of those buttons, the height is fixed but the width is something like 95% of the page, so they stretch out to fill the width but are narrower because it is a fixed number of pixels high and the pixel density increased.
You will likely need to use CSS media queries to adjust the font size, widths, and heights according to the screen size and pixel density.
Related
I've made a website for mobile. When I use this tag
<meta name="viewport" content="width=device-width, initial-scale=1">
my website fits the screen perfectly on all mobiles. But then the font sizes look different especially on chrome mobile browser of android. Chrome changes the font sizes of the text and displays some parts bigger and some parts smaller. I used
body{
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-o-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust:none;
}
but this doesn't solve the problem for some androids like Nexus. So I switched the viewport tag to
<meta name="viewport" content="width=device-width, initial-scale=1">
This sorted out the font size issue but this time some webpages don't fit all screen sizes perfectly. What shall I do so I get the best of two worlds? The paragraphs starting with "At Magenta Storage.." and "Give yourself more space.." are supposed to have the same font size. For the link to the website, you can click here
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'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.
Right now I'm using the following viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
The medium dpi scaling seems to get the best results in terms of default legibility. On most pages, when I rotate between portrait and landscape, the scaling stays at that level, however, on pages where I have orientation media queries, a higher zoom level is triggered, which is not desired.
I know this can be resolved by using target-densitydpi=device-dpi, but on high-resolution Android phones this doesn't look good, so I'd prefer to keep the target-densitydpi=medium-dpi.
Am I correct in thinking that the above meta tag should lock the scaling at medium-dpi? Also, is there a way to prevent the scaling/zoom on rotation as described above?
With that below i never ran across you issue
<meta name="viewport" content="user-scalable=0, initial-scale=1.0, width=device-width" />
I'm trying to create a mobile website for android. When I set the width of the body to 480px (the width of the screen) the result is about 50% larger than what I expect. It seems that android is scaling what it draws and messing up all my layouts. Does anyone know how to disable this, or work around it?
I'm already using this:
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
You're missing the secret new Android-only viewport property "target-densityDpi" which you can use to configure browser scaling. See the linked question for more details.
A device running Android does not necessarily have a screen width of 480 Pixel. Don't set a fixed width at all.