How to set a different meta viewport depending on the device

When using responsive design to design websites we may encounter certain problems when setting an initial width and scale in the viewport meta tag. For example, depending on how we have developed it, the ‘width’ can cause a horrible zoom to appear on the iPhone when loading the website while on the iPad it will appear correctly.

To avoid this, the main option is to detect the user agent and show one viewport or another. We have two options: use Javascript or PHP.

PHP code:

<?php
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'
if ( $isiPad ) {
  echo '<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">'
}else{
  echo '<meta name="viewport" content="width=700,initial-scale=0.45,maximum-scale=1.0">'
}
?>

javascript code:

<script type="text/javascript">
var isiPad = navigator.userAgent.match(/iPad/i) != null
if(isiPad){
  document.write('<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">'
}else{
  document.write('<meta name="viewport" content="width=700,initial-scale=0.45,maximum-scale=1.0">'
}
</script>

The PHP code will be useful when we do not use a caching system like Wordpress Super Caché and the PHP requests are not static. If the requests are cached, this verification must be delegated to the user using javascript code.