Twitter Bootstrap在Webkit浏览器（Chrome、Safari）上对文本缩放的方式不同

Question

Twitter Bootstrap在Webkit浏览器（Chrome、Safari）上对文本缩放的方式不同

google-chrometwitter-bootstrapsafariwebkitzooming

5

我正在考虑在网站重建中使用Twitter Bootstrap（带有一些自定义）。

问题之一是在Chrome和Safari等Webkit浏览器上的页面/文本缩放。这些浏览器在缩放时不会将文本重新包装到屏幕上。相反，文本继续超出页面，需要水平滚动。

例如，比较一下在Chrome / Safari和Firefox上缩放Bootstrap主页上的文本-在Firefox上，即使由于缩放而没有足够的空间容纳菜单文本，响应式菜单栏也能正常工作。

这似乎是已知的Webkit“功能”，针对基于像素的布局，可以通过使用基于em的宽度来解决，但与标准Bootstrap相比看起来不实际（需要更改和维护太多内容）。

那么，有哪些使用基于em的宽度的Bootstrap派生产品，或者有没有办法添加一些CSS片段等来解决问题？这是迄今为止阻止我在此项目中使用Bootstrap的唯一问题。我希望网站对低视力用户可访问，他们通常进行缩放。

如果Webkit修复了错误/功能以像其他浏览器引擎一样工作，那就太好了，但不幸的是我认为这不会很快发生。

[更新] 请明确，我要寻找与Firefox完全相似的操作：缩放文本保持在列中，并且媒体查询意识到屏幕上的空间受到限制时，根据需要调整菜单和列数。流动布局有助于约束主要文章文本，但在Chrome / Safari缩放时，菜单和侧边栏仍然很混乱。

- Rob Hoare

这个问题似乎最终已经在Chrome上得到了解决，至少在Linux和OS/X的Chrome 27版本中是如此。现在，在Chrome上使用Bootstrap与Firefox的工作方式相同，随着文本大小的增加，在导航栏和导航图标之间跳转，然后在缩小时再次跳转，并始终保持页面上的所有文本，而不是让列变得太宽。但是，在OS/X上的Safari 6.0.4仍然存在问题。 - Rob Hoare

Safari 6.0.3 OSX也出现了故障。 - idonnie

2个回答

1

Rob，你可以通过使用Bootstrap中的流体容器并将其max-width属性设置为百分比宽度来实现你想要的效果，例如：

[class*="container-"] {
margin: auto;
padding: 0 20px;
max-width: 90%;
}

这段话的意思是：HTML代码大致如下：

<div class="content">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                 put your contents in here
            </div>
        </div>
    </div>
</div>

不在容器内，可以作为背景。这就是我设置bootstrap网站的方式，并且在Safari和Firefox中尝试了一下，得到了您要求的结果。正如您所提到的，渲染与浏览器的渲染引擎有关（Firefox使用gecko，Safari使用webkit）。希望这能为您解决疑惑。

- schifferl

流式布局（带或不带额外的[class*="container-"]）在缩小一定程度后仍保持列中，但在Webkit中永远不会根据可见内容切换到较窄的布局。例如，当您放大http://twitter.github.com/bootstrap/examples/fluid.html时，在Chrome中菜单和侧边栏变得越来越混乱。在Firefox中，缩放几个级别即可使菜单折叠，并且更多的缩放将进入单列模式。添加上述[class*="container-"]似乎没有任何区别，您能否指向一个有效的示例？ - Rob Hoare

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Imtiaz · Accepted Answer

你可以将滑块设置为网站的低视觉访问者的 辅助功能 选项。只需使用 jQuery 进行文本大小调整，无需缩放页面。请参考以下示例：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var os = $('p').css('font-size');
            var num = parseFloat(os, 10);
            var px = os.slice(-2);

            $('p').css('font-size', num / 1.4 + px);
            if (this.id == 'larger') {
                $('p').css('font-size', num * 1.4 + px);
            }
        });
    });
</script>

<a href="#" id ="larger">Larger [+]</a>
<br>
<a href="#" id="smaller">Smaller [-]</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>