5

サイトの再構築に Twitter Bootstrap (いくつかのカスタマイズを含む) を使用することを検討しています。

問題の 1 つは、Chrome や Safari などの Webkit ブラウザーでのページ/テキストのズームです。これらは、ズーム時にテキストを画面に再ラップしません。代わりに、テキストはページの外に続き、水平スクロールが必要になります。

たとえば、Chrome/Safari と Firefox での Bootstrap ホームページのテキストのズームを比較してください。

これは、ピクセルベースのレイアウトを使用する Webkit の既知の「機能」のようです。em ベースの幅を使用することで解決できますが、これは標準の Bootstrap では実用的ではないように見えます (変更と保守が多すぎます)。

それで、emベースの幅を使用するBootstrapの派生物はありますか、それともcssなどのスニペットを追加して問題を回避する方法はありますか? これまでのところ、このプロジェクトで Bootstrap を使用するのを妨げているのはこれだけです。頻繁にズームする弱視ユーザーにもアクセスしやすいサイトにしたいと考えています。

Webkit がバグや機能を修正して他のブラウザ エンジンと同じように動作するようになればいいのですが、残念ながらすぐにそうなることはないと思います。

[更新] 明確にするために、これは私が求めている Firefox と完全に似たアクションです: テキストのズームは列内に制限されたままです。また、メディア クエリは、テキストがズームされているときに画面上のスペースが制限されていることを認識し、メニューと列の数を調整します。によると。流動的なレイアウトはメインの記事のテキストを制限するのに役立ちますが、ズームするとメニューとサイドバーは依然として Chrome/Safari で混乱します.

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の場合はgecko、safariの場合はwebkit）。これで問題が解決することを願っています。

于 2013-03-03T01:40:01.983 に答える