如何仅为iphone或ipad设置视口？

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

我有一个网站需要在iphone上使用0.3值的视口，但对于ipad需要0.7。

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

有没有办法只为iphone或ipad设置视口？

8 个解决方案

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

我用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).

标签设置默认比例，如果设备屏幕宽度小于600像素，

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

来源：Apple文档中的视口语法和配置Viewport - Apple文章

(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

如果需要根据设备（iPhone / iPad）设置不同的视口，则需要使用设备宽度设置视口
<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..

以上声明将在iPhone上设置一个320px的视口，在iPad上设置一个768px的视口。这就是woudld转化为0.3和0.7你正在寻找的...

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

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.

我不确定你是否可以只为iPhone设置视口，但你可以设置媒体查询，因此我认为只有iPhone的CSS。

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.

通过仅为iPhone（320x480）或iPad（1024x768）的设备宽度设置媒体查询，您可以实现您正在尝试的功能。

#7

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

更改数位板视口以准确显示固定的维度元素

#8

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:

Tim使用jquery的脚本似乎运行良好。我改变了一点，它似乎对我有用。我添加了一些比例参数。它给了我在iphone和ipad上我的页面显示所需的结果。这是我添加的内容：

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

#1