How to set viewport only for iphone or ipad?

For all mobile devices, try something like this.

<meta name="viewport" content="width=1024">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
    $("meta[name='viewport']").attr("content", "width=640");
  }
</script>

See my answer below on how to dynamically set your initial-zoom so that your entire site is zoomed correctly on page load (works for all device sizes).

Change tablet viewport to exactly show fixed dimension element