Digging into yesterday’s problem more I found references to a procedure called font boosting, and a number of ways to potentially control it or turn it off. Font boosting has to do with making the text larger by default on certain mobile devices in certain situations.
I put together a simple test page I could use to easily see the effects of different changes and clearly verify which CSS was in effect.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <!--meta name="viewport" content="width=750, initial-scale=0.5"--> <meta name="viewport" content="width=100%, initial-scale=1.0"> <title>Test CSS Page</title> <style> html { font-size:16px; } body { font-size:16px; } .measureDiv { width: 200px; height: 50px; background-color: #FF0000; } .containerDiv { width: 200px; background-color: #8888FF; } .font16 { font-size: 16px; } .font24 { font-size: 24px; } </style> </head> <body> <div class="containerDiv"><span>Here is some text for testing.</span></div> <div class="measureDiv"></div> <div class="containerDiv"><span class="font16">Here is some text for testing. font16</span></div> <div class="measureDiv"></div> <div class="containerDiv"><span class="font24">Here is some text for testing. font24</span></div> <div class="measureDiv"></div> <div class="containerDiv"><span style="font-size:2em">Here is some text for testing. 2em</span></div> <div class="measureDiv"></div> <div class="containerDiv"><span style="font-size:200%">Here is some text for testing. 200%</span></div> <div class="measureDiv"></div> </body> </html> |
The suggestions from this page didn’t seem to work. The main suggestion from this page is to set max-height or min-height parameters to very large or very small values (e.g., 999999px or 1px, respectively) as a way to short circuit the font boosting.
|
1 2 3 4 5 6 7 8 9 10 11 |
.stdTxt { width: 100%; height: auto; min-height: 1px; max-height: 999999px; } </style> </head> <body> <div class="containerDiv"><span class="stdTxt">Here is some text for testing.</span></div> <div class="measureDiv"></div> |
This suggestion didn’t appear to work, either. The remote debugger shows the 16px font size and the -webkit-text-size-adjust lines are properly in effect.
|
1 2 3 4 5 6 7 |
html,body,* { font-size:16px; text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } |
I considered writing some JavaScript to test for Android and then apply a multiplier to make the relevant text items smaller, but a review of the sizing commands I use show that any type of multiplier I might use would tend to be inconsistent. It would merely override whatever multiplier was already in place. The workaround for that would be to set the relative text size of every text element using an individual font-size command, and then apply a universal multiplier in em or percent to do a universal scaling. That would work, but seems to represent a nuclear option. I’d really like to find a better solution. (An even more nuclear option, fusion instead of fission, perhaps, is to punt the opening animation altogether.)
Another thing that confuses this whole effort is the fact that users can set the default size of text larger or smaller than the standard, which would probably obviate this whole discussion anyway. Hmm, maybe the nuclear option is the way to go. This is particularly true in light of the fact that I’ve been thinking of redoing the landing page into more of a copywritten story format, rather than being mostly a rehash of the Roles page. We shall see.