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.
Copied from http://stackoverflow.com/questions/4787304/how-to-set-viewport-only-for-iphone-or-ipad
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
No comments:
Post a Comment