Question

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

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

Answer 1

这是一个解决方案......

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

Answer 2

我找到了一个简单的jQuery方法！

将其添加到<head>代码：

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

<meta>标记设置默认比例，如果设备屏幕宽度小于600像素，<script>标记会重写视口（我认为所有手机设备都不到600像素）。

我无法在任何地方找到一个简单的解决方案，所以我想出了这个：）

Answer 3

请注意，meta viewport是逗号分隔的列表，不应使用分号。

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

来源： viewport syntax in Apple's documentation和 Configuring the Viewport – Apple article

（如果我有更多的声望点，我会将其添加为评论）

Answer 4

对于所有移动设备，请尝试这样的操作。

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

Answer 5

如果需要设置不同的视口，基于设备（iPhone / iPad），您需要使用设备宽度设置视口
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
上述声明将在iPhone上设置320px的视口在iPad上有768px。这就是woudld转化为0.3的原因和0.7你正在寻找..

这有效，但只有之后我意识到这条线不会进入......部分！我是傻瓜，但也许需要说出来。

谢谢！

Answer 6

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

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

Answer 7

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

通过仅为iPhone（320x480）或iPad（1024x768）的设备宽度设置媒体查询，您可以实现您的目标。

Answer 8

请参阅下面的答案，了解如何动态设置初始缩放，以便整个网站在页面加载时正确缩放（适用于所有设备尺寸）。

Change tablet viewport to exactly show fixed dimension element

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

8 个答案: