使用移动检测添加<meta name =“viewport”/>

Question

最近，我看到一些网站在JavaScript /服务器端代码中有相当于以下内容的声明：

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

仅在移动设备上添加标签是否有任何优势？由于基于用户代理，它似乎不太可靠，但我有兴趣听到双方的意见。

Answer 1

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

它做了什么？

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

width = device-width部分将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。

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

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

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