元视口仅适用于手机？答案

【问题标题】：Meta viewport ONLY for phones?元视口仅适用于手机？
【发布时间】：2013-08-10 15:49:36
【问题描述】：

有没有办法为手机设置通用响应元视口（）？我们有一个网站，没有meta 标签，缩小，在 7 英寸和更大的平板电脑上看起来不错，纵向和横向，但在较小的设备上有点太不方便了。

所以要让它在手机上按我们想要的方式工作，我必须使用<meta name="viewport"> 标签，然后强制一些媒体查询来修复更大设备上的问题。

有没有办法在手机上设置meta 标签，而在较大的设备上只设置设备默认的缩小视图？

谢谢！丰富

【问题讨论】：

标签： css mobile media-queries viewport

【解决方案1】：

你的意思是<meta name="viewport">吗？

<meta name="viewport" content="width=device-width, user-scalable=no" />

如果是这样，请尝试在<head> 中添加以下脚本（取自并改编自here）：

if(navigator.userAgent.match(/Android/i)
  || navigator.userAgent.match(/webOS/i)
  || navigator.userAgent.match(/iPhone/i)
  || navigator.userAgent.match(/iPad/i)
  || navigator.userAgent.match(/iPod/i)
  || navigator.userAgent.match(/BlackBerry/i)
  || navigator.userAgent.match(/Windows Phone/i)) {
    document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />');
}

这将检测用户代理是否指示浏览器是移动的，并根据需要写入元视口。

【讨论】：

如果我的回答有帮助，请投票并通过单击左侧的勾号将其标记为答案。这样做可以让其他人知道您的问题已得到解答，并且您和我都会获得声誉。每个人都赢了！
这不能回答问题，是吗？这仍将针对 ipad 和 Android 平板电脑。

【解决方案2】：

实际上，这可能是一个更好的解决方案：在 meta viewport 标签之后添加一个脚本，如果屏幕大于指定值，该脚本将更改该值。

<meta id="testViewport" name=viewport content="width=device-width, initial-scale=1">
<script>
if (screen.width > 590) {
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=980');
}
</script>

此脚本可能有多种变体。例如，您可以将实际屏幕宽度设置为视口，而不是固定值。

【讨论】：

【解决方案3】：

要实现这一点，请不要使用 <meta> 标记，也不要在常规 .css 文件中使用 @media 查询。

改为使用这种标签：

<link rel="stylesheet" media="only screen and (max-device-width: 320px)" href="wp-content/themes/thestory/css/320.css">

并在单独的 .css 文件（如本例中的 320.css）中为这些设备创建样式。

【讨论】：