Geek asks and answers

Twitter Bootstrap scales text differently on Webkit (Chrome, Safari)

I am studying using Twitter Bootstrap (with some settings) to restore a site.

One problem is scaling pages and text in Webkit browsers like Chrome and Safari. When scaling, they do not reinstall the text on the screen. Instead, the text continues from a page that requires horizontal scrolling.

As an example, compare the scaling of text on the Bootstrap home page in Chrome / Safari and Firefox - in Firefox, even in the flexible menu bar, it works correctly when there is not enough space for menu text due to scaling.

This is apparently a well-known Webkit feature with pixel-based layouts that can be solved using em-based widths, which seems impractical with standard Bootstrap (too much to change and support).

So, is there a Bootstrap derivative around which em-based width is used, or is there a way to add a css snippet, etc., to get around the problem? This is the only thing that prevents me from using Bootstrap in this project. I want the site to be accessible to lower vision users who often increase.

It would be nice if Webkit corrected the error / function to behave like other browser mechanisms, but I do not see that this will happen in the near future, unfortunately.

[update] Just to be clear, this is a complete similar action for Firefox that I perform: text scaling remains limited in columns, and media queries realize screen space limited when text is enlarged, and adjust the menu and number of columns respectively. Fluid layouts help with limiting the body of the article, but menus and sidebars are still messy in Chrome / Safari when scaling.

+5
source share
2 answers

You can set the slider as an accessibility parameter for visitors with low vision of your site. Just use text resizing with jquery. No need to enlarge the page. See this example:

<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>
+2
source

Rob

, , , 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 , . , (gecko firefox webkit ). , .

+1

More articles:


All Articles