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"/>
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"/>
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.
I have an application with several screens as HTML loaded in WebView.
The default CSS for texts is font:normal 14px Arial, Helvetica, sans-serif, which, as I assumed, is supposed to look the same (in terms of font size) on all devices.
For some reason, on some devices the font looks like size 26+ which causes the font to overflow in constricted elements.
What am I doing wrong?
there are other parameters play role in determining size of elements in HTML page in Android like :
<link rel="stylesheet" href="css/hdpi.css" media="only screen and (-webkit-min-device-pixel-ratio:1.5)">
<meta name="viewport" content="user-scalable=no, width=device-width, target-densitydpi=device-dpi">
try to integrate those parameters and you will get more stable view ..and then later you may update those values through JS or activity ..
good luck
Try this setting for webview .. this sets the initial scale for the WebView
setInitialScale (int scaleInPercent)
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.