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;
}
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'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'm trying to display an image (320x480px) in a webpage on android.
I'm trying to configure the viewport meta cause I want the image displayed in full screen.
Actually I simply configured the viewport like that
<meta name="viewport" content="width=320px" />
and it's working perfectly, except with the android default browser. I tried Chrome, Opera and Firefox, and they all display the image correctly.
Regarding this post Full webpage and disabled zoom viewport meta tag for all mobile browsers I tried to configure it in this way without success :
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
or
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=320,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
Do you have any idea on how to configure the viewport correctly ?
Thank You
<meta name="viewport" content="user-scalable=no, width=device-width">
user-scalable - controls wither the user can "pinch-to-zoom".
width - the width of the viewport.
All of the attributes require integer values, NOT floating point values.
In other words, 1 and not 1.0. Or you could use percentage.
There is no point in setting min and max scaling attributes to the same value.
Also, initial-scale is known to cause problems in iOS if set to 1.
I tried the below one. It works perfectly for me.
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
I like:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="viewport" content="width=321; user-scalable=no;" />
Android only accepts viewport widths GREATER than 320, so setting it on 321 did the trick for me.
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.