Safari放大/缩小破坏了页面布局（不能很好地改变字体大小）

Question

我想让我的网站跨浏览器，但是有一个问题。

Safari的放大/缩小功能破坏了我的网站布局-它不能很好地改变字体大小（或至少像IE，Firefox和Chrome一样）。

我该如何解决？

Answer 1

缩放很复杂，因为浏览器具有三种的实现方式：

1. 仅缩放文本（标准IE和Safari <= 3种方式）
2. 智能缩放整个页面（Opera，FF 3 +，Safari 4 +，Chrome和IE 9选项）
3. 以“正常”大小呈现页面并缩放整个内容（iPhone方式，Lion的Safari 5中为可选）

问题是浏览器不能智能地做到这一点：

• IE <= 9永远不会缩放以px为单位的元素。如果您的页面使用px中的所有字体，则不会缩放。如果随后将基本字体指定为10px之类的格式，则无法阅读该字体的IE用户将很不走运，除非他们使用IE 9。
• Safari（和其他一些浏览器），如果设置为仅缩放字体，则以px缩放字体，但不调整行高或以px指定的其他布局。这加剧到了极点。
• Safari 4+无法缩放以px为单位的值形式的字体。这意味着，如果您的基本字体为10px，并且将选择器指定为font-size：100％，则每个元素和图像都会变大，但是文本愚蠢地不会变大。这已经被打破了，我无法让苹果的任何人承认。 Chrome可能会遭受同样的愚蠢。

一种解决方案

我应该说的第一步是严重虐待任何迫使基本字体在站点范围内占10px的人，因为DPI显示越来越高，这对用户造成了残酷的后果。但这就是访客的解决方案。您作为作者应该与众不同：

1. 除非您的网站的固定宽度为740px，否则，请将基本字体设置为1em，然后将其保留在那里。如果无法摆脱740px设计模型的影响，请不要将基本字体设置为小于12px。在100dpi屏幕上，12px为8.6pt。在132 DPI（iPhone4和即将推出的其他设备）上，该值为6.5pt。任何40岁以上的人都可以使用它，甚至没有关闭，更不用说像我这样的低视力用户了。因此，在132 DPI屏幕上，似乎认为文本是页面的“重音”的人们所偏爱的10px字体为5.5pt。
2. 如果标头使用的图像无法缩放，请确保标头中的所有内容都可以缩放（如果缩放除外）。用px指定标题字体，覆盖基础的1em。 IE <= 9永远不会扩展它。 Safari <4可能会搞砸它。真的无法帮助。
3. 请确保您的CSS和布局允许垂直或滚动溢出。滚动溢出在iOS上不起作用，但无论如何，我们所能做到的只是捏缩放。使您的body内容保持高度不难。宽幅需要更多的工作（但我个人也要这样做！）
4. 永远不要按百分比调整字体大小。始终使用em的分数。 1.2em是120％。同样，0.75em是75％。我从来不会使用少于0.75em的基本字体，而只用于附带的文本。

结果

IE可以放大页面正文，但不能放大标题。

Safari 4将缩放整个页面。通过避免以px为单位的基本字体的百分比，您避免了Safari错误，尽管页面的所有其他部分都没有，但我无法让Apple承认字体从不缩放。这可能是您遇到的问题。

除非您提供移动样式表，否则iPhone可能仍将继续依赖捏缩放。 （如果这样做，请不要设置max-zoom：1.0，这很烦人！）

就是这样。

Answer 2

检查css文件中是否有-webkit-text-size-adjust的样式

如果您这样做，则为以下

-webkit-text-size-adjust: none;

您需要将其更新为

-webkit-text-size-adjust: auto;

Answer 3

我曾经使用css3属性缩放页面

( vendor prefix ) - transform = scale( 10 unit);  
    exp : document.body.style.webkitTransform = "scale(10px , 10px)";

最新版本的浏览器（例如chrome，ffx）正在按比例缩放页面内容（图像，文本，DOM元素），但在Safari浏览器中，文本无法正确缩放。这是令人沮丧的用户期望。它使文本内容模糊

我曾经修复过scale属性的css3 zoom属性瞬间。它使内容按比例缩放。

document.body.style.zoom = 1.1;