Different viewport meta for iphone and ipad

different-viewport-meta-for-iphone-and-ipad
I found two simple solutions to set different viewport meta for different devices with jQuery. This work for iPad, iPhone or any other device to for that matter.
The first solution for changing the viewport per device. This method uses the width of the device to change the meta data.

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, 
 user-scalable=no" />
<script>
if ($(window).width() < 600) {
     $('meta[name=viewport]').attr('content','initial-scale=0.54,
     maximum-scale=0.54, user-scalable=no');
}
</script>

The second method is to use the “User agent” tag, to check what kind of device it is. This method of Changing the viewport is not as precis due to different resolutions on the iPad or iPhone based on the model.

<!-- in head -->  <meta id="viewport" name='viewport'>
<script>
function(doc) {
var viewport = document.getElementById('viewport');
if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
   doc.getElementById("viewport").setAttribute("content", "initial-scale=0.3");
}
else if ( navigator.userAgent.match(/iPad/i) ) {
   doc.getElementById("viewport").setAttribute("content", "initial-scale=0.7");
 }
}(document));
</script>

Join the Conversation

5 Comments

  1. I ADAMS KEVIN, a representative Aiico Insurance plc, we trust and respect for individual differences in day out a loan. We will provide 2% of the loan's interest rate. If you are interested in this business contact us by e-mail: (adams.credi@gmail.com) now transfer their loan documents issued properly. Do you need a loan to set up business or school if you are very welcome to Aiico Insurance plc. You can also contact us by e-mail: (adams.credi@gmail.com). We first week can request a balance transfer.

    DO YOU NEED LOAN FOR PERSONAL BUSINESS? IF YOU CONTACT YOUR EMAIL ABOVE TO PROCEED WITH YOUR LOAN TRANSFER IMMEDIATELY OK.

Leave a comment

Your email address will not be published. Required fields are marked *