Font size changer

...using -webkit-text-size-adjust

by tonytlwu

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Brand</a>

        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#about">About</a>
                </li>
                <li><a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>
<div class="container">
    <div class="text-center">
         <h1>Parturient Commodo Lorem</h1>

        <p class="lead">Cras mattis consectetur purus sit amet fermentum.
            <br>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <p><a href="#" class="btn btn-warning change-size" data-size="80">Small</a> <a href="#" class="btn btn-warning change-size" data-size="100">Normal</a> <a href="#" class="btn btn-warning change-size" data-size="120">Large</a></p>
    </div>
    <div class="list-group"> <a href="#" class="list-group-item active">
        Cras justo odio
      </a>
 <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
 <a href="#" class="list-group-item">Morbi leo risus</a>
 <a href="#" class="list-group-item">Porta ac consectetur ac</a>
 <a href="#" class="list-group-item">Vestibulum at eros</a>

    </div>
</div>
<!-- /.container -->

JavaScript

$(document).on( 'click', '.change-size', function(){
    
    document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust=$(this).data('size')+"\%";
    
    return false;
    
} );