5

I'm looking into using Twitter Bootstrap (with some customisations) for a site rebuild.

One problem is with page/text zooming on Webkit browsers like Chrome and Safari. These don't rewrap the text to the screen when zooming. Instead the text continues off the page requiring horizontal scrolling.

For an example, compare zooming the text on the Bootstrap home page on Chrome/Safari and Firefox - on Firefox even the responsive menubar works properly when there's not enough room for the menu text due to zooming.

This seems to be a known Webkit "feature" with pixel-based layouts, which can be solved by using em-based widths, which looks impractical with the standard Bootstrap (way too much to change and maintain).

So, is there any Bootstrap derivative around which uses em-based widths, or is there any way to add a snippet of css etc to work around the problem? It's the only thing so far stopping me from using Bootstrap on this project. I want the site to be accessible for lower vision users, who often zoom.

Would be nice if Webkit fixed the bug/feature to behave like other browser engines but I don't see that happening anytime soon unfortunately.

[update] Just to be clear, it's the full similar action to Firefox I'm after: zooming text stays constrained within columns, AND media queries realise the space on the screen is limited when text is zoomed and adjust the menu and number of columns accordingly. Fluid layouts help with constraining main article text, but the menus and sidebars are still a mess on Chrome/Safari when zooming.

4

2 回答 2

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>
于 2013-03-09T16:47:53.653 回答
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 的情况下是壁虎，在 safari 的情况下是 webkit）。希望这可以为您解决问题。

于 2013-03-03T01:40:01.983 回答