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.
Related
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'm working on a website (it is not responsive) and I want to fit to screen when I access it from mobile.
On iPhone it is ok, it fits. But on android it has zoom to phone resolution or something.
This is my viewport:
<meta name="viewport" content="width=1100">
Not like this:
set width to device-width,So change
<meta name="viewport" content="width=1100">
to
<meta name='viewport' content='width=device-width, initial-scale=1.0 maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;' />
You need to adjust the scaling. Reference:
http://developer.android.com/guide/webapps/targeting.html
Also have a look at this:
WebView in Android 4.4 and initial-scale
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 have this following page
Now on my text and other contents, my text and images are pixelated. on bigger devices.
as you can see in the image the text on nexus s looks great. but on galaxy nexus its pixelated.
this is my meta tag
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
when I add target-densitydpi=device-dpi everything becomes smaller and my media queries doesn't work. it shows how the website viewed in a desktop version.
How can i make it nice on the galaxy nexus?
Try this.
http://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3
html, html a {
-webkit-font-smoothing: antialiased !important;
}
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">