使用移动检测添加 <meta name="viewport">答案

【问题标题】：Adding <meta name="viewport"> with mobile detection使用移动检测添加 <meta name="viewport">
【发布时间】：2017-06-17 09:29:33
【问题描述】：

最近，我看到一些网站在 JavaScript / 服务器端代码中有与以下内容等效的语句：

if user is on a mobile device
    print '<meta name="viewport" content="scaling stuff">'

只在移动设备上添加标签有什么好处吗？由于它基于用户代理，它似乎不太可靠，但我很想听听双方的意见。

【问题讨论】：

可能有用reading
谢谢，@aug。我知道标签的作用，我的问题只是关于它被有条件地添加。

标签： javascript mobile media-queries meta

【解决方案1】：

我建议您在每个响应式网站上使用<meta name="viewport" content="width=device-width"> 或<meta name="viewport" content="width=device-width, initial-scale=1">。不需要有条件地添加，因为它对桌面设备没有影响。

它有什么作用？

视口元素向浏览器提供有关如何控制页面尺寸和缩放的说明。

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（这取决于设备）。

（可选）initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。这将阻止用户放大，这就是为什么我倾向于不使用该部分，但在移动应用上可能会很方便。

如果不使用元视口标签会怎样？

移动设备将假定网站的宽度为 980 像素，并尝试缩放网站以适应屏幕大小。它还将尝试调整文本大小以使其更具可读性。这在非响应式网站上可能很方便，但对于响应式网站，您希望完全控制移动设备将如何呈现您的移动设备。

【讨论】：

我了解标签的使用并自己使用它，我只是更好奇有条件添加它背后的原因。
您这样做的唯一原因是，如果您想要一台平板电脑来调整网站的桌面版本以适应，而不是显示响应版本。但是，我个人认为这不是一个好主意，除非没有考虑网站在平板电脑上的外观，您只需要快速修复以使其在平板电脑上运行。如果只在所有移动设备上显示视口，那将毫无意义，因为视口元数据对桌面没有影响。
这似乎很奇怪，因为用户代理检查包括iOS和Android这两个主要的平板电脑平台，所以我真的不确定。我可能会直接联系网站的开发人员，因为这似乎是我获得答案的唯一途径。
在我看来这样做毫无意义。最好联系网站开发人员。我很想知道他们说什么。
是的，我就是这么想的——由于用户代理的不同，它似乎比在所有设备上使用它更不可靠。我会做！感谢您的帮助。