iPad和iphone 5c的横向模式：文本看起来比平时更大，换行错误

Question

查看this site

时

这样：

小屏幕正确的换行符。它也为iphone 5c和ipad在横向模式下换行（添加换行符）。哪个错了。这句话可以在一行中完成。

字体大小似乎也更大。

在景观模式下，我的HTC One S上不会发生自动换行/换行。

是否有工具可以帮助我找出这些违规行为？

知道这个问题是关于什么的吗？

注意：这会被使用：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

编辑我在网站上应用了修复程序，所以现在我听说它看起来不错。给出的答案可以解决问题（在应用100%而不是none时）

Answer 1

Apple设备（我可能认为Android设备上的Chrome也可以这样做）有一种非常有趣的方式在页面上呈现文本，字体自动增大以保持纵向和横向相同的“流量”，因为它帮助用户不要忘记它当前正在阅读的行。

完全禁用调整大小的方法是使用以下CSS规则：

html {
    -webkit-text-size-adjust: none;
}

但是，此行为仅适用于使用元标记user-scalable=no进行缩放修复的移动网页，并且在桌面缩放时会破坏某些桌面浏览器

您可能想要的是在每个缩放比例下保持字体大小不变。如果您在CSS上添加以下内容，那么您将拥有所需的内容。

html {
    -webkit-text-size-adjust: 100%;
}

Answer 2

‑webkit‑text‑size‑adjust: 100%

是否可以这样做而不是

‑webkit‑text‑size‑adjust: none

使用 none 会破坏用户在各种浏览器中的缩放。

以下是关于该主题的精彩内容：http://blog.55minutes.com/2012/04/iphone-text-resizing/

Answer 3

要构建自适应和跨设备的网站，您可以使用this emulator

等在线工具

但是，在文本案例格式和布局中，需要一个真正的模拟器。 X代码可以启动IOS sumulator并为您提供在任何苹果设备（智能手机和平板电脑）上调试本地/远程网站的方法。 通过使用该软件，您将能够理解/调试和更正您的网站。

目前，所有浏览器或多或少地以不同方式管理旋转动作（lanscape＆lt; - ＆gt; portrait）以及字体。所以，我看起来并不完全相同，但您的网站在所有浏览器中都非常相似。

在您的情况下，首先您需要停止所有浏览器以在轮换时调整文本大小。 只需添加以下CSS代码即可。

<强> CSS

html, p, a {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

顺便说一句，我检查了你的换行问题。 Ios 6X和Ios 7X上的所有东西都在Iphone 4/5上运行。 但无论如何，您将来需要在IOS上查看您的网站simulator

以下是来自iphone 5的safari的屏幕截图：