问题描述
我遇到了一个简单的CSS布局问题。它适用于桌面浏览器，但不适用于iPhone的Mobile Safari。使用style =float：right似乎与Mobile Safari自动调整字体大小有冲突。下面的代码在桌面上工作正常，但在iPhone上左和下文比右大得多：
左< span style =float：right>右< / span>
< p>以下文字< / p>
Mobile Safari的自动调整大小似乎并未触及浮动词，只有其他词。正如，我可以添加 -webkit-text-size-adjust：100％，如下所示：
< body style = - webkit-text-size-adjust：100％>
向左< span style =float：right>向右< / span>
< p>以下文字< / p>
< / body>
但我想保留Mobile Safari的字体大小和可读性。我试图避免为不同的屏幕尺寸编写特殊的布局。
那么是否有更友善的iOS方法可以在同一行中左右对齐单词的文本？
有没有尝试过使用另一种方法来定位跨度元素内的文本？你可以尝试的一种方法是 position：absolute; right：0; 在该span元素上，看看iOS是否使用自动调整大小来渲染它。我试着在iOS模拟器中测试它，并且所有文本的大小都是相同的。
以下是我测试代码的jsFiddle：
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?
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/
这篇关于在Mobile Safari的CSS中使用float float时错误的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！