Question

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

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

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

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

那么，是否存在使用基于em的宽度的任何Bootstrap派生，或者有没有办法添加一段css等来解决这个问题？到目前为止，这是唯一阻止我在这个项目中使用Bootstrap的东西。我希望该网站可供低视力用户访问，他们经常进行缩放。

如果Webkit修复了错误/功能以便像其他浏览器引擎一样运行，那将会很不错但不幸的是我很快就不会发现这种情况。

[更新]为了清楚起见，这是Firefox之后完全类似的操作：缩放文本在列中保持约束，并且媒体查询意识到文本缩放时屏幕上的空间有限并调整菜单和相应的列数。流体布局有助于限制主要文章文本，但在缩放时，Chrome / Safari上的菜单和侧边栏仍然很混乱。

Answer 1

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

Answer 2

罗布，

您可以通过在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>

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

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

2 个答案: