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

【问题标题】：How to set viewport for specific devices only?如何仅为特定设备设置视口？
【发布时间】：2012-03-25 01:26:15
【问题描述】：

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

问题是我不希望 iPad 上的任何视口声明或至少具有另一个“宽度”。

在我要实现 WURFL 并用 PHP 排除 viewport-declaration 之前，有什么简单的解决方案吗？

【问题讨论】：

标签： iphone ipad viewport media-queries

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

谢谢，但我认为你误解了我的意思。我只想要小于 480 像素的屏幕的视口声明。所以识别 iPad 无济于事。