Question

我在使用简单的CSS-Layout时遇到了麻烦。它适用于桌面浏览器，但不适用于iPhone的Mobile Safari。使用style =“float：right”似乎与Mobile Safari自动调整字体大小相冲突。以下代码在桌面上运行正常但在iPhone上“左”和“跟随文本”比“右”大得多：

Left<span style="float:right">Right</span>
<p>Following text</p>

似乎Mobile Safari的自动调整大小并不会触及浮动的单词，只会触及其他单词。如上所述here，我可以像这样添加-webkit-text-size-adjust: 100%：

<body style="-webkit-text-size-adjust: 100%">
    Left<span style="float:right">Right</span>
    <p>Following text</p>
</body>

但我想保留Mobile Safari在字体大小和可读性方面的智慧。我正在努力避免为不同的屏幕尺寸编写特殊的布局。

那么在同一行文本中左右对齐单词是否有更友好的iOS方式？

Answer 1

WebKit有一个恼人的功能（对于设计合理的响应式网站）试图放大＆＃34;主要＆＃34;屏幕上的文字，其中主要是它最好的猜测。一旦你浮动一些文字，它就不再被认为是＆＃34;主要＆＃34;内容，因此它没有应用自动缩放。

您可以使用以下方法禁用此行为：

body {
    text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%;
    }

您应该将此功能与响应式设计结合使用，以便为小屏幕设备的用户适当缩放内容。

注意：请勿使用none;这会导致旧的webkit桌面浏览器中出现错误，导致它们禁用文本缩放。

Answer 2

是否尝试过使用另一种在span元素中定位文本的方法？您可以尝试的一种方法是{span}元素上的position: absolute; right: 0;，并查看iOS是否使用自动调整大小来呈现它。我尝试在iOS模拟器中测试它，并且所有文本的大小都相同。

这是我测试的代码的jsFiddle：http://jsfiddle.net/AntLm/3/