15

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

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

4

8 回答 8

29

这是一种解决方案...

<!-- 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>
于 2012-05-21T13:42:11.180 回答
10

我找到了一个使用 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>标签设置默认比例，<script>如果设备屏幕宽度小于 600 像素（我认为所有手机设备都在 600 像素以下），标签会重新写入视口。

我在任何地方都找不到简单的解决方案，所以我想出了这个:)

于 2011-08-06T16:30:38.287 回答
8

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

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

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

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

于 2011-12-30T19:46:08.150 回答
5

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

<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>
于 2013-05-02T18:32:51.730 回答
3

如果需要设置不同的视口，根据设备（iPhone/iPad），需要使用 device-width 设置视口

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">

上面的语句将做的是在 iPhone 上设置一个 320px 的视口，在 iPad 上设置一个 768px 的视口。猜猜这就是你正在寻找的 0.3 和 0.7 的视口。

这有效，但只有在我意识到这条线没有进入 ... 部分之后！我很愚蠢，但也许需要说。

谢谢！

于 2011-09-10T14:55:38.773 回答
1

Tim 使用 jquery 的那个脚本似乎运行良好。我对其进行了一些更改，它似乎对我有用。我添加了一些比例参数。它为我提供了在 iphone 和 ipad 上很好地显示页面所需的结果。这是我添加的内容：

maximum-scale=2.0; user-scalable=1;
于 2013-08-21T07:54:52.643 回答
0

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

更改平板电脑视口以准确显示固定尺寸元素

于 2013-04-13T03:19:16.857 回答
0

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

通过仅为 iPhone (320x480) 或 iPad (1024x768) 的设备宽度设置媒体查询，您可能会实现您想要的。

于 2011-08-01T15:20:01.887 回答