最近,我看到一些网站在JavaScript /服务器端代码中有相当于以下内容的声明:
if user is on a mobile device
print '<meta name="viewport" content="scaling stuff">'
仅在移动设备上添加标签是否有任何优势?由于基于用户代理,它似乎不太可靠,但我有兴趣听到双方的意见。
答案 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像素,并尝试缩放网站以使其适合屏幕。它还将尝试调整文本大小以使其更具可读性。这对于非响应式网站来说非常方便,但是如果您希望能够完全控制移动设备呈现移动设备的方式,则可以使用响应式网站。