仅适用于智能手机的 HTML 元视口

Question

我正在构建我的第一个响应式页面，但遇到了“元视口”问题。

我正在使用这个：

<meta name="viewport" content="width=device-width,,minimum-scale=1.0,user-scalable=yes" />

在 Desktop 和 iPhone 上，我看到了我想要的结果。但我的 iPad 结果是。我只想将meta name="viewport" 用于智能手机。有没有办法将此标签限制为仅适用于智能手机？

编辑： 我只想要一个智能手机断点。问题是，当我将“Meta Viewport”标签添加到头部时，我遇到了问题。我希望这个元标记只在 max-width==480px 时出现。

编辑 2 -> 我的解决方案：

“screen.width”在添加“Meta Viewport: device-width”后返回与 window.innerWidth 相同的值。它现在可以在台式机、ipad 和 iPhone5 上运行。

<script type="text/javascript">
if( screen.width < 480 ) {
    document.write( '<meta name="viewport" content="width=device-width,minimum-scale=1,user-scalable=no" />' );
}
</script>
<link rel="stylesheet" media="screen and (min-device-width: 280px) and (max-device-width: 480px)" href="files/css/smartphones.css" />

Answer 1

您不能让 iOS（iPhone 或 iPad）忽略视口标签。您可以做的是为 iPad 嗅探浏览器并使用 javascript 动态删除视口标签。或者，仅当用户代理是手机而不是平板电脑时才添加视口标签。

类似这样的：

if (navigator.platform === 'iPad') {
    var viewport = document.getElementsByName("viewport")[0]
    viewport.parentNode.removeChild(viewport)
}