How to set viewport only for iphone or ipad?

One solution…

<!-- 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>

Another way

I found a simple way with jQuery!
Add this to the head tag:

<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>

Thetag sets the default scale and the tag re-writes the viewport if the device screen width is less than 600 pixels (I think all phone devices are under 600px).

Using Meta Tags for iPhone and iPad Orientation

The best way to detect the orientation of the device is by using meta tags. The viewport meta tag is used by Safari on the iPhone and iPad to determine how to display a web page. Properties of the viewport meta tag include width, height, initial-scale, user-scalable, minimum-scale and maximum-scale. Here is a table which shows the minimum and maximum values for those properties:

The initial-scale is the one that renders when the page initially loads. The scale is changed by pinching and double tapping on the device. Instead of using a fixed width, you should use the width=device-width which automatically makes the width equal to the width of the device’s screen:

<meta name="viewport" content="width=device-width/" >

To keep users from expanding the window size beyond the size it needs to display properly, you can set the maximum-scale to 1.0. I would use this technique carefully, as it takes away the user’s ability to enlarge the page for viewing on smaller screens such as that of the iPhone. That said, here is how it’s done:

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

Another way

Using JavaScript for iPhone and iPad Orientation

The meta tags shown above work very well, however, you can also use JavaScript to do the same thing, since both the iPad and iPhone support the scripting language. The following JavaScript function detects and sets the device's viewport orientation by using the innerWidth property of the window object and setting the orient attribute of the body element regularly (in this case every 4 seconds):

<script type="text/javascript">
var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>

You can place the above snippet in the HEAD of your iPhone/iPad-ready web page, and it will set the display to the appropriate orientation setting.

Using CSS for iPhone and iPad Orientation

Another method that you can use to your advantage is using Cascading Style Sheets (CSS). Obviously, you will need a style sheet that is devoted to portrait use, and another for landscape use. We will cover the creation of such style sheets in a future article, but for now you need to know how you will use them. It's as simple as adding a link to your style sheets within your HEAD tag:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">