Twitter Bootstrap 在 Webkit（Chrome、Safari）上以不同方式缩放文本

Question

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

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

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

这似乎是基于像素布局的已知 Webkit“功能”，可以通过使用基于 em 的宽度来解决，这在标准 Bootstrap 中看起来不切实际（更改和维护太多）。

那么，是否有任何使用基于 em 的宽度的 Bootstrap 衍生产品，或者有没有办法添加一个 css 的 sn-p 等来解决这个问题？到目前为止，这是唯一阻止我在这个项目中使用 Bootstrap 的事情。我希望经常缩放的视力较低的用户可以访问该网站。

如果 Webkit 修复了错误/功能以使其表现得像其他浏览器引擎，那就太好了，但不幸的是，我认为这种情况不会很快发生。

[更新] 需要明确的是，这与我所追求的 Firefox 完全相似：缩放文本保持在列内，并且媒体查询意识到当文本缩放和调整菜单时屏幕上的空间是有限的相应的列数。流畅的布局有助于限制主要文章的文本，但在缩放时，Chrome/Safari 上的菜单和侧边栏仍然一团糟。

Answer 1

罗伯，

您可以通过在引导程序中使用流体容器然后将其最大宽度属性设置为百分比宽度来完成您想要的操作，例如：

[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>

class内容的div不在容器内，可以作为背景。这就是我设置引导站点的方式，并且刚刚在 safari 和 firefox 中尝试了您正在寻找的结果。正如您所提到的，渲染必须执行浏览器的渲染引擎（在 Firefox 的情况下是壁虎，在 safari 的情况下是 webkit）。希望这可以为您解决问题。

Answer 2

您可以将滑块设置为 可访问性 选项，以供您网站的低视力访问者使用。 只需使用 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>