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.
Related
I have a test document as follows:
<html>
<head></head>
<body></body>
</html>
So it's just an empty document. In normal browser mode, I get an nice empty page, no scrolls.
But when I open devtools and turn on mobile emulation (for example, Sony Xperia Z, Z1), I see scroll bars (both horizontal and vertical), and html element size is 980x1742. Where does this come from? Shouldn't it be at least zero height?
To make your page the exact size of the screen (no zooming or otherwise), place this in the header:
<meta name="viewport" content="width=device-width, initial-scale=1">
There's some more info about it, as well as additional parameters you may find useful, on Mozilla's developer site here.
I had to do:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
My HTML apps is having almost the same layout on any size mobile device & tablets or PC.
Even font uses to adjust as per the screen size. I can also zoom in & out to my app when I open it in chrome browser
But when I convert this html app to android app using cordova, My android app does not show same flexibility.
Fonts do not fit on screen & I cannot zoom in/out my Android app. Also, app layout does adjust as per screen size.
I have used viewport tag in my HTML app.
<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" />
My Cordova source ;---
https://github.com/dinguluer/UiMagician/tree/master/samples/cordova/source/test
Cordova Android app genrated for Android 4.3 :--
https://github.com/dinguluer/UiMagician/tree/master/samples/cordova/samples/Android/4.3/Multiple_multi_houses
Main css file on which layout depends :--
https://github.com/dinguluer/UiMagician/blob/master/samples/cordova/source/test/www/css/multiFloorStyle.css
Am I not following cordova responsive web design standard ?
Do I have to change the dimention in css file as per vw & vh variables of viewport ?
If yes then how to do it for my static css file multiFloorStyle.css ?
Please suggest.
for better look and feel, font-size , images use media queries in css then you can get.
<style>
#media (max-width: 600px) {
.facet_sidebar {
font-size: 1em;
}
}
</style>
for zoom issue modify your meta tag, your made it user scalable false , thats why its not zooming
use this:
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=2; initial-scale=1.0; user-scalable=yes"/>
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.
I have developed a webapp and successfully used the viewport element to fit the app for different devices. On iPhone for example i used this one:
<meta name="viewport" content="width=685,user-scalable=0" />
My webapp looks fine with this viewport on the iPhone Safari browser. Therefore i thought, it would be easy to wrap my webapp with the help of PhoneGap as an AppStore App. But so far i had no luck to do so. The viewport tag seems to be ignored completely.
So here is my question:
Does the viewport tag work at all with a specific width (like in the above example) on PhoneGap? Or do i have to rework everything to responsive web design?
I've been fighting with the same for a few hours.
With the last version of phonegap i managed like this :
In your main java, add the following lines BEFORE super.loadUrl(blablabla
super.init();
super.appView.getSettings().setUseWideViewPort(true);
super.appView.getSettings().setLoadWithOverviewMode(true);
This still will allow the user to "double tap" to zoom in/out. So modify your meta with this :
<meta name="viewport" content="width=685; target-density-dpi=device-dpi ; initial-scale=0.1; maximum-scale=0.1; user-scalable=no;" />
It worked for me with Phonegap 3.0, and Android >= 4
Use the meta tag like this to set the width automatically to device width:
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>
Hope that helps.
Try adding this to the header of html
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>
and this to your config.xml:
<preference name="EnableViewportScale" value="true" />
Try this-
< meta name="viewport" content="width=device-width; user-scalable=yes; initial-scale=0.1; maximum-scale=5; minimum-scale=0.5" />