How to set viewport only for iphone or ipad?_问答_开发者

How to set viewport only for iphone or ipad?

开发者 https://www.devze.com 2023-02-07 00:41 出处：网络

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开发者_如何学Python viewport for only iphone or ipad?Here is one solution...

相关专题：viewport

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开发者_如何学Python viewport for only iphone or ipad?

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>

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

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)

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>

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!

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;

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.

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