I have a webpage where the font-size of body 16px.
On Google Chrome for Android, I have the following problem: When the page initially loads, the font size in elements which don't have a font-size defined (and therefore inherit the font-size from the body) is bigger than 16px (as you will see if you read on, there is no obvious way to calculate the multiple to which the size of the rendered text is bigger). When the user scrolls down the rendered text size changes to 16px.
See the two images below for a visualisation
In the above screenshot the page has loaded and the user has not interacted with the page.
In the above screenshot the page has loaded and the user has interacted with the page. Notice how the font size on the element showing "0% interest" is now smaller
When the text is larger and smaller - both sizes compute as 16px
Despite the fact that there is a visual difference between the two font-sizes. Before the user scrolls and the text is larger and after the user scrolls and the text size is smaller — the font-size in all cases computes as 16px.
In the above image we can see that the font-size is in both cases 16px but that the two rendered texts are clearly different in size
What happens if the size is changed?
If I change the of the text, the rendered text size increases or decreases (depending on whether or not the number is greater or less than 16). In both cases though the text size increases in proportion to the original text size.
It seems like the browser is showing 16px as a certain size and that it then changes this size when the user scrolls.
Here I've increased the font-size to 20px. Whilst the font size does increase, it increases in proportion to the original rendered text size
Could Javascript be responsible this?
I don't think so. I have disabled javascript in the browser and reloaded the page and the problem still persists.
Does anyone have an idea about what might be causing this?
There are two solutions around:
As described here Chrome on android resizes font the issue occurs if any text reach a certain length.
Add "max-height: 999999px;" to the element which is surrounding the text.
<meta name="viewport" content="width=device-width, initial-scale=1">
For me solution no 1 worked.
There is so-called font size "adjusting". Try to disable it:
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
See details: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
Related
I got a problem with font rendering on mobile devices.
I have a simple table width set fixed to 800 pixels, common size for todays mobiles.
Text in my cells all use the same html css makeup.
The text in the first row show ok
But the next row is a problem it is split into two cells.
The left cell is a picture and in the right cell there is some text.
My problem is that most mobile web browsers scale down the font size in that cell.
To me it would be oké if that text would simply be spread over a bit more lines but that doesn't happen, they tend to keep as much lines similar as in a desktop browser view.
I've set the font size using pt px and no effect in the css file like
.DefaultFont
{
font-family: 'Merriweather Sans', Arial,verdena,sans-serif;
font-size: 13pt;
font-style: normal;
color:#4e0203;
font-weight: 400;
}
used 13pt 13em and other methods etc nothing worked.
And for the html element used span and div and p and tried it inside td element, but again no effect.
PS I'm not looking for javascript tricks for scaling pages client side with device detection etc. As i simply use php to determine if its a desktop or a mobile device (which requires less code to be transmitted). I just need the code so that the font wont change as caused by a mobile web browser.
How do i stop those clients from rescaling parts of tables ?
SOLUTION
The final solution that worked really nice was a combination of multiple people here.
Set table width's in %
Set font size in vw (which like % has also a 100 index), a low value like 2 or so.
Note vw is supported by lots more then just font size, also images.
include the meta tag it even worked without that after above, but to be on the safe side i recommend it.
Have you tried Meta tags,to check if it works...
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
Check out,It may be helpful..
Maybe you should use viewport sized typography units for the font-size.
It can be used when you want to size thing through the viewport's (element container) width or height. Or both, for that matter. The possible values are:
vh - viewport's height
It sizes proportionaly to the container's height.
font-size: 2vh;
vw - viewport's width
It sizes proportionaly to the container's width.
font-size: 2vw;
vmin - viewport's minimum
It sizes proportionaly to the smaller between 'vh' and 'vw'.
font-size: 2vmin;
vmax - viewport's maximum
It sizes proportionaly to the larger between 'vh' and 'vw'.
font-size: 2vmax;
It surely can give you the looks that you want. Just find the current proportional value, and no matter the screen's size, it will fit!
W3 viewport relative length's docs
i think this should do the trick
-webkit-text-size-adjust: none;
You can use window.innerHeight.
I have same applications on two devices with different screen sizes, one is 1024x600(180dpi), another is 1280x800(213dpi). This app contains webview with dimensions specified in pixels. On first device it is a little smaller. The problem is that when I load my custom html page, on first device with smaller screen and webview the page is rendered correct, but on second device with bigger screen and bigger webview, it doesn't fit.
I expected page to fit the second webview following white spaces, because page is fixed size and second device screen is bigger.
How to fix this?
Html had this line:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
It was the reason why setInitialScale() didn't work at first.
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 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