Question

我需要为小于480px（iPhone等）的所有设备设置<meta name="viewport" content="width=650" />。我想到的最简单的解决方案是<meta name="viewport" content="width=650" media="only screen and (max-device-width: 480px)" />，但遗憾的是，元标记中不允许使用media-attribute。

问题在于我不想在iPad上进行任何视口声明，或者至少需要另一个“宽度”。

在我要实现WURFL并用PHP排除viewport-declaration之前是否有任何简单的解决方案？

Answer 1

所以我提出了这个解决方案（在Modernizr的帮助下）：

<meta name="viewport" id="viewport" />
<script src="modernizr.js"></script>
<script>
if(Modernizr.mq("only screen and (max-device-width: 480px)")) 
   document.getElementById("viewport").setAttribute("content","width=650");
</script>

Answer 2

这是一个很好的干净原生解决方案。

（我认为将这些数据移植到您的webView很容易）

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
{
     // The device is an iPad running iPhone 3.2 or later.
     float viewportWidth = 768.0;

}
else
{
     // The device is an iPhone or iPod touch.
     float viewportWidth = 320.0;
}

如何仅为特定设备设置视口？

2 个答案: