元视口仅适用于手机？
Posted
技术标签:
【中文标题】元视口仅适用于手机？【英文标题】：Meta viewport ONLY for phones? 【发布时间】：2013-08-10 15:49:36 【问题描述】：有没有办法为手机设置通用响应元视口（）？我们有一个网站，没有meta 标签，缩小，在 7 英寸和更大的平板电脑上看起来不错，纵向和横向，但在较小的设备上有点太不方便了。
所以要让它在手机上按我们想要的方式工作，我必须使用<meta name="viewport"> 标签，然后强制一些媒体查询来修复更大设备上的问题。
有没有办法在手机上设置meta 标签，而在较大的设备上只设置设备默认的缩小视图？
谢谢！丰富
【问题讨论】：
【参考方案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）中为这些设备创建样式。
【讨论】：
以上是关于元视口仅适用于手机？的主要内容，如果未能解决你的问题，请参考以下文章