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

时间:2017-06-17 09:29:34

标签: javascript mobile media-queries meta

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

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

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

1 个答案:

答案 0 :(得分: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像素,并尝试缩放网站以使其适合屏幕。它还将尝试调整文本大小以使其更具可读性。这对于非响应式网站来说非常方便,但是如果您希望能够完全控制移动设备呈现移动设备的方式,则可以使用响应式网站。