Question

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

因此，为了让它能够在手机上运行，我不得不使用<meta name="viewport">标签，然后迫使某些媒体查询修复较大设备上的内容。

有没有办法在手机上设置meta标记，只是设备默认缩小了大型设备上的视图？

谢谢！富

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

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

Answer 2

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

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

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

Answer 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）。

Meta视口仅适用于手机？

3 个答案: