Menu
I'm having trouble with a simple CSS-Layout. It works on desktop browsers but not on iPhone's Mobile Safari. Using style="float:right" seems to conflict with automatic font size adjustments made by Mobile Safari. The following code works fine on the desktop but on the iPhone "Left" and "Following text" are much larger than "Right":
Left<span style="float:right">Right</span>
<p>Following text</p>
It seems like Mobile Safari's auto-resizing isn't touching the floated word, only the others. As stated here, I could add -webkit-text-size-adjust: 100% like so:
<body style="-webkit-text-size-adjust: 100%">
Left<span style="float:right">Right</span>
<p>Following text</p>
</body>
but I would like to preserve Mobile Safari's smarts regarding font size and readability. And I am trying to avoid writing special layouts for different screen sizes.
So is there a more iOS-friendly way to left- and right-align words in the same line of text?
288
The ideal base font size for mobile screens is 16 pixels. Anything smaller and users will have to pinch and zoom to read. In your site's CSS, it's recommended to set the font-size attribute in "ems" to make it more easily scaled. Using ems is helpful because it changes text relative to the size set in the document.
The font-size-adjust property of CSS tells the browser to adjust the font size of the text to the same size regardless of font family. When the first chosen font is not available, the font-size-adjust property allows you more control over the font size.
WebKit has an annoying function (for a properly designed responsive site) of trying to enlarge the font for the "primary" text on the screen, where primary is simply it's best guess. Once you float some text, it is no longer considered "primary" content, so it does not have the auto-zooming applied to it.
You can disable this behavior with:
body {
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
This is still an experimental property.
You should use this in conjunction with a responsive design that scales the contents appropriately for users of small-screen devices.
Note: Do not use none; that trips a bug in older webkit desktop browsers which causes them to disable text zooming.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
