javascript - 添加 <meta name ="viewport"> 并进行移动检测

标签 javascript mobile media-queries meta

最近,我看到一些网站在 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 - 添加 &lt;meta name ="viewport"> 并进行移动检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44602939/

相关文章:

ios - 为 WebRTC iOS 启用位码

html - 窗口大小可以与设备大小不同吗?

javascript - 在函数内传递函数参数

javascript - AngularJs 位置路径更改而无需所有 Controller 重置

javascript - 响应式 Adwords 广告

css - 带 Bootstrap 的替代网格

css - 媒体查询+浏览器缩放

javascript - 如何在golang中顺序处理并发请求?

javascript - 在浏览器检查窗口打开或浏览器调整大小之前,dygraphs div 不可见

Jquery日期选择器: Can we hide it on iOS and show native iOS datepicker/spinner instead?