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>