Set viewport settings correctly for all device types

Different devices like IPad, IPhone, Androind Mobiles and Laptops may automatically set viewport of a webpage to a custom setting, and though this helps to get a better user experience in most cases, sometimes it may not help our media queries and web page looks scattered.

The quick and 'least damaging' solution is to set viewport scale to 1.0 in viewport meta tag, but sometimes even that may not be enough, and we have to resort to using a custom script inside document head.

<!-- in head -->

    <meta name="viewport" id="viewport" />

    <script>

    (function (doc) {

        var viewport = document.getElementById('viewport');

        if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {

            //viewport.setAttribute("content", "initial-scale=0.3");

        } else if (navigator.userAgent.match(/iPad/i)) {

            viewport.setAttribute("content", "initial-scale=1.0");

        }

    }(document));

    </script>

<!-- in head -->

Copied from http://stackoverflow.com/questions/4787304/how-to-set-viewport-only-for-iphone-or-ipad