8

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

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

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

谢谢！富有的

4

3 回答 3

11

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

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

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

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" />');
}

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

于 2013-08-08T21:25:12.423 回答
4

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

<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>

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

于 2016-01-04T15:45:55.867 回答
0

为此，请不要使用<meta>标记，也不要@media在一般 .css 文件中使用查询。

相反，使用这种标签：

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

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

于 2016-01-04T12:27:17.740 回答