google-chrome - Twitter Bootstrap 在 Webkit(Chrome、Safari)上以不同方式缩放文本

Question

我正在研究使用 Twitter Bootstrap(带有一些自定义)来重建网站。

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

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

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

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

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

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

Answer 1

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