使用 jquery 更改视口元标记答案

【问题标题】：change viewport meta tag with jquery使用 jquery 更改视口元标记
【发布时间】：2014-10-20 19:25:56
【问题描述】：

我想知道是否可以在页面加载之前使用 jquery 将元标记添加到 html 页面。我问的原因是因为我有一个没有视口元标记的页面，只有当分辨率低于 700 像素时才应该有它 - <meta name="viewport" content="width=device-width, initial-scale=1"/>

原因是，我有用于移动网站的 html 标记（使用媒体查询）和用于桌面版本的 html 标记（我没有用于平板电脑的标记）。我想确保为桌面设计的 html 标记在页面加载以及我们更改设备方向时在平板电脑上正确呈现。

提前致谢！

【问题讨论】：

@AndyHolmes - 当我们多次改变方向时，默认情况下有一个视口<meta name="viewport" content="width=device-width, initial-scale=1"/> 会导致页面在平板电脑上溢出。
在我发表评论后意识到这一点！哈哈。检查我的答案:)
您应该使用 CSS 来处理这个问题。如果视口标签在平板电脑或台式机上引起问题，那么您的 CSS 编码错误！

标签： javascript jquery html css media-queries

【解决方案1】：

使用 jQuery 你可以这样做：

if ($(window).width() < 700) {
   $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
}

编辑

默认有viewport标签，然后在699px以上移除：

HTML：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>

jQuery:

if ($(window).width() > 699) {
   $('head').remove('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
}

【讨论】：

谢谢，但是当页面已经加载时不会发生上述情况吗？不幸的是，我需要在页面加载之前添加元标记 - 如果可能的话。
然后默认拥有并移除> 700
谢谢，很遗憾这不起作用。这只会从 html 中删除标签。但是，此时 html 已经加载，假设它在所有设备上都有视口。希望这是有道理的。
我不明白你的问题，你希望标签出现在某些尺寸上，我已经展示了，然后提供了如何删除它，我已经展示了。你真的试过代码吗？视口仅在元实际存在时才有效

【解决方案2】：

试试这个（你不再需要元标记末尾的/）：

if(screen.width < 700) {
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
}

【讨论】：

【解决方案3】：

一旦加载了 jQuery 库并且头部在 DOM 中注册，你当然可以：

if (jQuery('html').outerWidth(true) < 700) {
  jQuery.('head').append('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
}

【讨论】：