Question

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

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

我该如何解决？

Answer 1

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

的样式

如果你这样做，那就是以下

-webkit-text-size-adjust: none;

您需要将其更新为

-webkit-text-size-adjust: auto;

Answer 2

缩放很复杂，因为浏览器有三种方法：

仅缩放文本（标准IE和Safari＆lt; = 3路）
智能缩放整个页面（Opera，FF 3 +，Safari 4 +，Chrome和IE 9选项）
以“正常”大小渲染页面并缩放整个内容（iPhone方式，在Lion上的Safari 5中可选）

问题在于浏览器不会智能地执行此操作：

IE＆lt; = 9将不会缩放以px为单位的元素。如果您的页面使用px中的所有字体，则不会缩放。如果你然后将你的基本字体指定为类似10px的东西，那么无法读取它的IE用户运气不好，除非他们有IE 9。
Safari（以及其他一些设备）如果设置为仅缩放字体，则会缩放px中的字体，但不会调整行高或px中指定的其他布局。这种情况极端恶化。
Safari 4+不会缩放指定为px中值的百分比的字体。这意味着如果您的基本字体是10px并且您指定选择器具有font-size：100％，则每个元素和图像将变大，但文本愚蠢地不会。这是破产，我不能让苹果公司的任何人承认这一点。 Chrome可能会遭遇同样的愚蠢行为。

解决方案

我应该说第一步是严重滥用任何会强制基本字体网站范围为10px的人，因为越来越高的DPI显示对你的用户造成了残酷的影响。但那是访客的解决方案。作为作者你应该有点不同：

除非您的网站是固定宽度740px或其他内容，否则请将基本字体设置为1em并将其保留在那里。如果您无法摆脱740px设计模型，请不要将基本字体设置为小于12px。使用100dpi屏幕时，12px为8.6pt。在132 DPI（iPhone4和即将推出的其他设备），它是6.5pt。 40岁以上的任何人都可以访问它，甚至不能说像我这样的低视力用户。因此，在132 DPI屏幕上，看起来认为文本是页面的“重音”的人所喜爱的10px字体是5.5pt。
如果您的标题使用了无法缩放的图像，请确保标题看起来不错，如果它的所有内容都可以缩放。在px中指定标题字体，覆盖基础中的1em。 IE＆lt; = 9永远不会扩展它。 Safari＆lt; 4可能搞砸了。无法真正得到帮助。
确保您的CSS和布局允许垂直或滚动溢出。滚动溢出在iOS上不起作用，但我们所有的都是pinch-zoom。让 body 内容成为流畅高度并不难。流体宽度需要更多的工作（但我个人也这样做！）
不要按百分比调整字体大小。总是使用em的分数。 1.2em是120％。同样，0.75em是75％。我不会使用低于0.75em的基本字体，仅用于附带文本。

<强>结果

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

Safari 4将缩放整个页面。通过避免px中基本字体的百分比，您可以避免Safari错误我无法让Apple承认字体永远不会缩放，即使页面的其他部分都有。这可能是你看到的问题。

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

简而言之就是这样。

Answer 3

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

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

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

      I used to fix css3 zoom property instant of scale property
      it  makes the content zooming proportionally 

                   document.body.style.zoom = 1.1;

Safari放大/缩小废墟页面布局（不会改变字体大小）

3 个答案: