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

抢，

您可以通过在引导程序中使用流体容器，然后将其 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 中进行了尝试，得到了您正在寻找的结果。正如您提到的，渲染必须由浏览器的渲染引擎完成（对于 Firefox 来说是 gecko，对于 safari 来说是 webkit）。希望这能为您解决问题。