如何为iphone或ipad设置视口？

我有一个网站，需要在iphone上使用0.3值的视口，但为ipad 0.7。如何为iphone或ipad设置视口？

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

来源

2011-01-24 Moon

如果你不满意你的答案，请评论他们，这样人们可以尝试改进他们。如果你是，接受其中之一。 – 2011-09-07 07:51:15

@fichek在这种情况下，这里没有答案回答OP的问题。这包括你自己的答案。在要求OP回应之前，请重新阅读以下问题：） – Ross 2012-05-21 12:51:19

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

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

来源

2011-08-01 15:20:01

我用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-06 16:30:38 Sean

iPhone最初将窗口宽度设置为960像素。 – Ross 2012-05-21 13:59:35

这对我无效 – 2013-06-12 18:11:15

如果您需要设置不同的视口，基于设备（iPhone/iPad的），你需要设置使用设备宽度视
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;"> 
什么上面的语句会做设定的320像素视口上的iPhone 和768px的iPad..Guess这就是woudld转化为0.3 和0.7ü正在寻找。

这个工作，但只有后我意识到，这条线不会在...节！我愚蠢，但也许需要说。

谢谢！

来源

2011-09-10 14:55:38 testndtv

请注意，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

（如果我有更多的声誉分，我想补充一点的注释）

来源

2011-12-30 19:46:08 babca

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

<!-- 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-21 13:42:11 Ross

请参阅我的回答下面的如何动态设置l-zoom，以便整个网站在页面加载时正确放大（适用于所有设备尺寸）。

Change tablet viewport to exactly show fixed dimension element

来源

2013-04-13 03:19:16

对于所有的移动设备，尝试这样的事情。

<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-02 18:32:51 tim

Tim使用jQuery的脚本看起来很好。我改变了一点，它似乎为我工作。我添加了一些比例参数。它为我提供了iPhone和iPad上我的页面显示所需的结果。这里是我补充说的：

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

来源

2013-08-21 07:54:52 John

如何为iphone或ipad设置视口？

回答

相关问题