I have a project that is displaying 16px text font at 0.5ems links on the iPhone perfectly fine.
However, when I switch to an Android browser, the text font enlarges itself and my positioning of the links are screwed.
My links are in a
<p><a>[Link]</a></p>
statement.
Is there any way to prevent the Android text from resizing itself? Or is there a better solution to this?
EDIT:
I just realised the android browser doesn't allow for auto scrolling as well. Why is this so? Aren't both the iPhone and Android browsers using webkits as its base? Why are they so different even though they use the same technology? Are there any extra attributes i should declare in CSS for it to work the same as the Safari counterpart?
I had a similar problem as well. I had a design that was designed specifically for the Retina display, but the retina display actually has a pixel density of 2, so a pixel isn't necessarily a pixel (non retina iphone pixel width: 320px, retina: 640px).
To fix that, I put this in the <head>: <meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'> so that a normal phone will scale as I expect, and the retina display would scale appropriately (half scale).
I'm not sure what kind of design you're using, but I'd play around with the initial-scale and maximum-scale, try both .5 and 1 and see what you get.
If you use pixels (px), it is related to the screen pixel density. An iPhone "retina" display would show text differently to your Android device.
This article covers the topic pretty well: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
I found a setting that might help in another question, Font size rendering inconsistencies on an iPhone:
body {
-webkit-text-size-adjust: 100%;
}
An alternate value is described in another question, Font size issue with iPhone:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Seems like one of these might prevent the android browser from resizing. Hope this helps.
If you want to stop Android from auto-scaling your pixel values, you can try adding this to your viewport meta:
target-densitydpi=device-dpi
Here's a good reference on the same:
http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui
Related
There's a problem that shows up on a Nexus 7 in which font-size: isn't working properly in a p:first-letter selector.
p:first-letter {
font-size:1.3em;
font-weight:bold;
color:#662020;
}
Screen shots from the Nexus 7 Chrome below. On the left is it in landscape orientation and looks as expected with the first letter larger. On the right the same page in portrait mode. Note the first letter, "V" has become smaller than the rest of the text. I tried setting font-size:130% and it looks the same, too small.
There are also similar problems with p:first-line that are probably related. I only see these issues on Android devices.
Any clues how to fix this (some meta viewport magic or something) or a work around?
This looks like it might be Font-boosting. Chrome will look at the page and work out if it needs to boost the font-size to make the text readable, in this case there is a chance that it is boosting the copy higher than the :before font-size.
Make sure you have a viewport set: and that should limit the effect of font boosting.
If you can also provide a demo site that will help me diagnose it further
Yes, there's a known bug: http://crbug.com/253763 (feel free to star it).
I'm a little confused by your screenshots though, because when I view vijayanderson.com/bio on a Nexus 7 everything looks fine. What version of Chrome are you using (Settings > About Chrome), and what do you have Settings > Accessibility > Text Scaling set to?
This is response to #Kinlan - it's long and so I made it an answer instead of a comment.
"font-boosting" - I knew it was happening but didn't know what it was called. If you want to look at the live site it's http://vijayanderson.com/bio.
The meta viewport is a standard one:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It seems like a bug in font-boosting in that it doesn't boost p:first-letter and p:first-line. It will appropriately boost a span with enlarged font in the paragraph, so a replacing p:first-letter with a span will look right, but is not the right fix.
I do not want to disable font-boosting, I think it adds usability. Thanks for your response.
I have a webpage which is displayed by Android application via Webview component.
It decides to change the font-size so the text of 16px has font-size=14px (I can see it when I inspect the element with weinre. It has 16px but in computed style it has 14px).
I wouldn't like the Webview to decide what is better at all. So how can I fix the problem?
Remark: In this specific case the change causes the text not to be vertical aligned, because after the change the line-height doesn't adjust the font-size. It is just one of the cases and I would like to stop Webview from changing the css values.
This issue seems to be due to the WebView respecting the system font size setting (which can be altered at: Settings > Display > Font size).
Several bug reports have been submitted in various places (for example)
In order to reproduce the problem you have to scale down the system font size to small or minimum.
...
Okay, I can repro if I change Settings > Display > Font size. It doesn't repro in Chrome, but then Chrome doesn't seem to respect "Font size" in the first place. I'm pretty busy right now, so it may be a while before I can investigate further.
Try setting your system font size to "Small" or "Medium" and test your app.
This issue only affects pages viewed in a webview and not the android browser. It possibly only affects a subset of devices. Has anyone else seen this problem?
I'm seeing my device transform fonts as follows:
16px -> 14px
14px -> 12px
12px -> 10px
I'm trying to force my page to render fonts at 12px across all devices. Here's a potential solution (using jQuery):
$(document).ready(function()
{
//set font-size to 12px
$('html').css('font-size', "12px")
//See what font-size is computed by the webview
var fs = parseFloat($('html').css('font-size'));
//If the webview is being naughty, compensate for it
if (fs == 10)
{
$('html').css('font-size', "14px");
}
}
I encountered the same behavior and solved it by changing TextZoom in the WebView Settings. On my app, the default value seems to be linked to the system font size setting. Set it to 100 to prevent the webview from changing the font size.
https://developer.android.com/reference/android/webkit/WebSettings#setTextZoom(int)
Are there any known problems with font-size scaling differently on Android and IPhone?
I've got a site with 107% font-size set on the HTML selector. Then I've got a media query right below it that sets the font-size to 150% for screens smaller than 500px.
If I remove the media query and view the page on an Iphone and an android, the 107% size text looks comparable in size on both devices.
If I add the media query back in, the text gets bigger on both devices as expected. However, on the iPhone it gets WAY bigger so much so that its almost 50% to 100% larger than it appears on the android! It totally breaks the layout!! This is happening on all text elements everywhere in the layout.
Is this a known problem with mobile devices or do I have some kind of compounded units problem happening?
Well, is it in both portrait and landscape mode, or only in landscape?
Because, in landscape, fonts get bigger by default browser behaviour. Maybe one was in portrait mode and other in landscape?
See about this here >
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
And if this is your problem, the solution is something like>
html {
-webkit-text-size-adjust: 100%;
}
I'm working on a webApp that should resize to any screen size a device could have. On iOS and older android versions the viewport tag works fine. The picture on the screen is always resized to fit the screen.
(Like described here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
On the Galaxy Nexus (Android 4.0) it won't work. On the left and right side is about 20px space and I don't know why he does this.
My viewport tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
No matter what I change about the tag, the space is always there and the content doesn't fit to screen.
I've made a sample page to show you the effect: http://easyeve.w3y.de/link/index.html
If you open this link on an iPhone the content perfectly fits (you won't see anything yellow = body) and the document width is 320px. On the Galaxy Nexus you will see yellow space and the document width is 360px (which is exactly half of the display resolution). This should be 320px too!
Do you have this problem too and is there a way to fix it?
Update: I've noticed the same Problem on Galaxy Note / Android 2.3.6
Therefore it's not an Android 4 issue. It has to do with the large screen size I guess..
The very same issue here (Galaxy Nexus - Android 4.0.2), I am talking about regular web page in the default browser
Setting viewport meta initial-scale less then 1 (zoom out) seems to be ignored by the browser. Higher values than 1 (zoom-in) works fine.
There are settings in the browser (settings->advanced) where you can change things:
Default zoom - it makes difference, but it does not fix the issue
Auto-fit pages - in my case makes no difference
Everything seems to work just perfect in Chrome browser (beta at the moment), but that is not default browser for ICS / Galaxy Nexus.
UPDATE (solution):
Setting meta viewport "width=device-width" fails on Galaxy Nexus.
Setting viewport "width=1280" works just great (1280px is width of the screen of galaxy nexus).
Beware that setting "width=1280,user-scalable=no" breaks it again (you can zoom out even if there is user-scalable=no) :(
I ran into something somewhat similar on a Galaxy Tab 2. When setting up your WebSettings for the applcation, try setting webViewSettings.setUseWideViewPort(true); This will force Android to consider the viewport meta tag. It was being ignored in the case of the Galaxy Tab 2 for my app and everything in the viewport was drawing incorrectly until I changed this.
I ended up wrangling with this problem today. My issue was a little bit more complex, because I had to deal with a Wordpress stylesheet (from another theme) in addition to the base CSS. Chrome worked perfectly on my phone and tablet and the stock browser worked fine on the tablet, too. However, the stock browser kept zooming out and showing me the desktop view. There were no margins on either side, which was the correct behavior, but the browser should have removed the floats from my sidebar and content divs and zoomed in to the main content (I'm using #media queries). As weird as it sounds, I actually fixed this by first setting the Zoom setting to Far, refreshing, and then resetting Zoom to Medium and refreshing.
I should point out that when I looked at your page's HTML and CSS, I noticed that you set a specific pixel width for your page div. I'm pretty sure you need to use percentages for width instead. For example, my centered content div has margin: 0 auto;, min-width:320px;, max-width:900px;, and width:100%;.
When using border-radius on my android emulator I am seeing ugliness like this:
ugly border radius http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png
Is there anyway to get Android to display rounded corners via -webkit-border-radius in a more pleasing way? Most modern desktop browsers and Mobile Safari seem to antialias their corners, but not Android's renderer.
I'm really hoping I don't have to do this with images, and there is some awesome trick to get pretty corners with only a border radius css declaration.
I indeed absolutely needed too some trick to make the border-radius look smoother on the android browser so I come up with this simple yet effective solution. I just added box-shadow as shown below to my css class:
-webkit-box-shadow: 0 0 1px #000;
There is a small issue just adding this line of code to your css: yes… it will target all -webkit browsers, making the border-radius look ( slightly ) less sharper.
At the time I’m writing this I didn’t thinked yet at the perfect solution, but you can make good use of media queries limiting the rule wether you use the ‘max-width’ property (to limit the range of devices based on their screen width at least spearing webkit desktop browsers) or the ‘-webkit-device-pixel-ratio’ to target the different android devices based on their pixel density:
#media only screen and (-webkit-device-pixel-ratio:.75){
/*for low density (ldpi) Android layouts */
}
#media only screen and (-webkit-device-pixel-ratio:1){
/*for low density (ldpi) Android layouts */
}
#media only screen and (-webkit-device-pixel-ratio:1.5){
/*for low density (ldpi) Android layouts */
}
Best regard and good designing to everybody. Hope I helped some desperate android border-radius obsessed designer like me too ;)
There is no imageless solution to this in the curent Android release, sadly.
For just displaying a circle, using a transform along with -webkit-backface-visibility: hidden; as per this answer could help (although transforms are expensive on low end Android devices).