How to set viewport only for iphone or ipad?

问题

I have a website that needs to use 0.3 value for viewport on iphone, but 0.7 for ipad.

Is there a way to set viewport for only iphone or ipad?

回答1:

Here is 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)) {
            viewport.setAttribute("content", "initial-scale=0.3");
        } else if ( navigator.userAgent.match(/iPad/i) ) {
            viewport.setAttribute("content", "initial-scale=0.7");
        }
    }(document));
</script>

回答2:

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>

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

I could not find a simple solution anywhere so I came up with this :)

回答3:

Please note, meta viewport is comma-delimited list, you should not use semicolons.

<meta name = "viewport" content = "width = 320,
       initial-scale = 2.3, user-scalable = no">

Source: viewport syntax in Apple's documentation and Configuring the Viewport – Apple article

(If I had more reputation points, I would add this as a comment)

回答4:

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>

回答5:

If you need to set different viewport, based on the device(iPhone/iPad), you need to set the viewport using device-width
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
What the above statement will do is set a viewport of 320px on iPhone and 768px on the iPad..Guess that is what woudld translate into 0.3 and 0.7 u are looking for..

This worked but only after I realized that this line does not go in the ... section! Dumb of me, but maybe needs to be said.

Thanks!

回答6:

That script from Tim that uses jquery seems to work well. I changed it a little bit and it seems to work for me. I added some scale parameters. It gave me the results I needed for my page display well on both iphone and ipad. Here is what I added:

maximum-scale=2.0; user-scalable=1;

回答7:

I'm not sure you can set a viewport for only iPhone but you could set the media query and thus the CSS for only iPhone I think.

By setting the media query for only device widths of the iPhone (320x480) or iPad (1024x768) you could possibly achieve what you're trying for.

回答8:

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

来源：https://stackoverflow.com/questions/4787304/how-to-set-viewport-only-for-iphone-or-ipad

标签

iphone

viewport