Twitter Bootstrap zooms text differently on Webkit (Chrome, Safari) Twitter Bootstrap zooms text differently on Webkit (Chrome, Safari) google-chrome google-chrome

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


You can set a slider as accessibility option for lower vision visitors of your site..Just use text-resizing using jquery. No need to zoom 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 nostrudexercitation 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>


Rob,

You can accomplish what you want by using a fluid container in bootstrap and then setting its max-width property to a percentage width with something like:

[class*="container-"] {margin: auto;padding: 0 20px;max-width: 90%;}

the html would look something like:

<div class="content">    <div class="container-fluid">        <div class="row-fluid">            <div class="span12">                 put your contents in here            </div>        </div>    </div></div>

Where the div of class content is not within the container and can serve as background. This is how I have my bootstrap site set up and have just tried in safari and firefox with the results you are looking for. As you mentioned the rendering has to do browser's rendering engine (gecko in the case of firefox and webkit in the case of safari). Hope this clears things up for you.