How to set viewport only for iphone or ipad?

后端未结

关注

 8  975

忘了有多久

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?

相关标签:

8条回答

半阙折子戏

2021-02-01 08:15
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!
0 讨论(0)
发布评论:

提交评论
- 加载中...
伪装坚强ぢ

2021-02-01 08:19
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 :)
0 讨论(0)
发布评论:

提交评论
- 加载中...
时光取名叫无心

2021-02-01 08:19
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;
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

被撕碎了的回忆

2021-02-01 08:20

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>

0 讨论(0)

野的像风

2021-02-01 08:29

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

野的像风

2021-02-01 08:34

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>

0 讨论(0)

1 2 下一页