Wrong font size when using float right in CSS on Mobile Safari

问题

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?

回答1:

Have tried using another method of positioning the text within the span elements? One method you can try is position: absolute; right: 0; on that span element and see if iOS renders it with the auto-resizing. I tried testing this within the iOS simulator and all text were identical in size.

Here's the jsFiddle for the code that I tested: http://jsfiddle.net/AntLm/3/

回答2:

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.

来源：https://stackoverflow.com/questions/20924039/wrong-font-size-when-using-float-right-in-css-on-mobile-safari

标签

html

ios

iphone

css

mobile-safari