最近,我看到一些网站在 JavaScript/服务器端代码中有相当于以下内容的语句:
if user is on a mobile device
print '<meta name="viewport" content="scaling stuff">'
仅在移动设备上添加标签有什么优势吗?由于它基于用户代理,它似乎不太可靠,但我有兴趣听到双方的意见。
最佳答案
我建议使用<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 部分设置浏览器首次加载页面时的初始缩放级别。这将阻止用户放大,这就是为什么我倾向于不使用该部分,但在移动应用程序上可能很方便。
如果不使用元视口(viewport)标签会发生什么?
移动设备将假定网站宽度为 980 像素,并尝试缩放网站以适合屏幕。它还会尝试调整文本大小以使其更具可读性。这在非响应式网站上可能很方便,但对于响应式网站,您希望完全控制移动设备如何呈现您的移动设备。
关于javascript - 添加 <meta name ="viewport"> 并进行移动检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44602939/