Mobile Zoom Detection

http://blog.brianrichards.net/post/16347970275/reacting-to-the-zoom-level-in-mobile-browsers

by BrianRichards

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css">
<div id="contentWell">
    <p>
    Bacon ipsum dolor sit amet short ribs shank ut brisket dolore shoulder in non, cow eiusmod nulla biltong dolore eu. Turducken voluptate consequat tri-tip, duis tenderloin minim beef ribs t-bone cillum. Veniam in dolore, brisket anim excepteur in consequat eu. Consectetur hamburger dolor ad turducken, excepteur sed et tri-tip voluptate salami do ut occaecat. Incididunt elit ullamco nostrud ex. Labore strip steak kielbasa pork loin incididunt. Adipisicing exercitation beef ribs velit, turkey minim enim incididunt jowl ex et.
</p>
<p>
    Andouille leberkase quis spare ribs id shankle. Venison strip steak pork chop, cillum in elit eu leberkase sausage. In pariatur jerky occaecat. Nostrud shoulder qui dolor. Tongue incididunt dolor pastrami pig brisket. Short loin et corned beef dolor sed biltong. Do short loin deserunt, laborum shank kielbasa in pancetta tongue biltong.
</p>
<p>
    Et tempor fatback, nisi in t-bone culpa dolor. Beef ribs mollit pastrami commodo sirloin. Irure venison magna strip steak fatback ground round leberkase chuck, laborum excepteur cow consequat adipisicing fugiat. In drumstick dolore tempor voluptate. Pork chop short ribs salami ut, pork loin biltong laboris voluptate. Filet mignon fatback mollit ball tip drumstick, elit aliqua adipisicing eiusmod shoulder. Ham hock nostrud fugiat, in chicken pork belly hamburger biltong swine short ribs pig anim pork loin rump.
</p>
<p>
    <button id="launchDialog" style="margin-left:auto;margin-right:auto;display:block;width:100px;">Launch Dialog</button>
</p>
<p>
    Mollit ut ut id. Qui dolore andouille consequat pork belly est officia et. Filet mignon reprehenderit frankfurter jowl, proident ground round est deserunt tail ex commodo anim bresaola in meatloaf. Flank prosciutto ham hock turkey, mollit dolore rump. Mollit andouille aute, ut shankle...

CSS

body{
    font-family:"Segoe UI", sans serif;
    font-size:.9em;
}
#contentWell{
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

JavaScript

var _dialogWidth = 800;
var _dialogHeight = 400;

$("#myDialog").dialog({
    autoOpen: false,
    width: _dialogWidth,
    height: _dialogHeight
});
$("#launchDialog").click(function(){
    var adjWidth = _dialogWidth;
    var adjHeight = _dialogHeight;
    
    //determine zoom
    //works for iOS and Android
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;

    //if zoom level is less than 5 (moderate/high zoom) take up full width
    //>=1 removes desktop browsers from the equation
    if ((zoomLevel >= 1) && (zoomLevel <= 5)) {
        adjWidth = $(window).width()/ zoomLevel;
        adjHeight = $(window).height() / zoomLevel;
    } else {
        adjWidth = $(window).width();
        adjHeight = $(window).height();
    }

    if (adjWidth < _dialogWidth){
        adjWidth = adjWidth - 8;
    } else {
        adjWidth = _dialogWidth;
    }
    
    $("#myDialog")
            .dialog("option", "width", adjWidth);
    
    if (adjHeight < _dialogHeight){
        adjHeight = adjHeight - 8;
    } else {
        adjHeight = _dialogHeight;
    }  
    
    $("#myDialog")
            .dialog("option", "height", adjHeight);
    
    $("#myDialog")
            .dialog("option", "position", ["left","top"]);
    
    $("#myDialog").dialog("open");
});