Question

我正在构建我的第一个响应式页面并且出现了与＃34; Meta Viewport＆＃34;。

的问题。

我用这个：

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

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

编辑：我只想要一个智能手机断点。问题是，当我添加＆＃34; Meta Viewport＆＃34;标记到头，比我有问题。我希望只有当max-width == 480px时才显示此元标记。

编辑2 - ＆gt;我的解决方案：

＆＃34; screen.width＆＃34;在添加＆＃34; Meta视口：设备宽度＆＃34;后，返回与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)
}

HTML Meta Viewport仅适用于智能手机

1 个答案: