Develop Reference

cordova - responsive web design

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"/>

meta name="viewport" content=width=device-width font size issue

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

Adjusting width for mobile devices

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">

Treat Android 480w like a Zoomed 320/640w Mobile Web Design

My designer handed me a 640w design to work with on an iPhone and Android mobile website.
I got everything setup using the 320w measurements and replacing graphics with media queries based on pixel ratios. This is mostly a problem with images in the design being used as a background image to an element and other elements defined in PX dimensions. We've sized all of our typography as EM's so one simple media query could adjust all of the typography but the icons and layout graphics would still not be correct.
The problem I'm running into is that the 480px wide Android test device looks too zoomed out, I tried to use different variations of the meta viewport tag to handle this. Each of the following was tried, independently, without yielding the desired effect.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=320" />
This is mostly a problem with images in the design being used as a background image to an element and other elements defined in PX dimensions. We've sized all of our typography as EM's so one simple media query could adjust all of the typography but the icons and layout graphics would still not be correct.
Mobile web is a bit uncharted for me and I'd like to find a way to handle this with the viewport setting rather than defining additional media queries. My understanding is that the viewport meta exists to help handle this type of problem across multiple viewport sizes without having to define new media queries every time a slightly different viewport comes to market.
If my approach is off please do share a reference to a better approach. We have a mix of elements that need to be fluid and fairly fixed, which makes this a challenge but I'm open to suggestions!

Replace your meta tags with these and see if it helps:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If those don't help then it would help to see your code to get an idea of how your CSS and HTML are laid out.

How to scale a website for mobile devices?

I've a very simple static web page (only css and links, no scripts).
It looks good on android and iphone, but too small. I'm guessing they put it smaller since it work for most of the sites.
How can I override this and make him look the size I want it to be?

Android automatically adjusts to the size of your site, try to use width:100% or smaller than around 310 pixels (scrollbar takes space) for normal viewmode.
For IPhone try using this code to force the correct size
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Also to force font-size try to use this code in your css:
-webkit-text-size-adjust: none;

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
The list should be comma-separated.