使用 jQuery 删除和附加视口答案

【问题标题】：Remove and append viewport using jQuery使用 jQuery 删除和附加视口
【发布时间】：2020-04-27 20:06:30
【问题描述】：

我遇到了一个 HTML 页面，其中包含以下代码：

jQuery(document).ready(function () {
    var screen_width = parseInt(jQuery(window).innerWidth());
    var scale = screen_width / 1200;
    $('head').remove('<meta name="viewport">');
    $('head').append('<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=' + scale.toFixed(1) + ',minimum-scale=0.1,user-scalable=yes"/>');
});

当我检查网页时，控制台下出现以下错误：

jquery.js:13 未捕获的错误：语法错误，无法识别的表达式： <meta name="viewport">
在 Function.ga.error (jquery.js:13)
在 ga.tokenize (jquery.js:16)
在 ga.compile (jquery.js:20)
在 ga.select (jquery.js:20)
在 ga (jquery.js:10)
在 Function.ga.matchesSelector (jquery.js:13)
在 Function.r.filter (jquery.js:20)
在 Ka (jquery.js:34)
在 r.fn.init.remove (jquery.js:35)
在 HTML 文档。（评论：1878）

如果 $('head').remove('<meta name="viewport">'); 被注释掉，错误就会消失。这是删除视口的正确方法吗？

【问题讨论】：

这能回答你的问题吗？ Changing meta-tags dynamic with jQuery

标签： jquery

【解决方案1】：

由于“删除功能”的错误实现而导致错误。当您要删除元素本身以及其中的所有内容时。除了元素本身，所有与元素关联的绑定事件和 jQuery 数据都将被删除。

当你为 .remove() 指定一个元素时，一定要使用元素名称、id、类等选择器。

代码一定是这样的：

jQuery(document).ready(function () {
   var screen_width = parseInt(jQuery(window).innerWidth());
   var scale = screen_width / 1200;
   $('meta[name="viewport"]').remove();
   $('head').append('<meta name="viewport" content="target-densitydpi=device dpi,width=device-width,initial-scale=' + scale.toFixed(1) + ',minimum-scale=0.1,user-scalable=yes"/>');
});

或者更好的实现：

jQuery(document).ready(function () {
   var screen_width = parseInt(jQuery(window).innerWidth());
   var scale = screen_width / 1200;
   $('meta[name="viewport"]').attr('content', "target-densitydpi=device dpi,width=device-width,initial-scale=' + scale.toFixed(1) + ',minimum-scale=0.1,user-scalable=yes'/>");
});

【讨论】：

【解决方案2】：

有多种方法可以做到这一点：

选项 1：

$('head meta[name="viewport"]').remove();

选项 2：

$('head').find('meta[name="viewport"]').remove();

选项 3：

$('head meta[name="viewport"]').prop('outerHTML', '<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=' + scale.toFixed(1) + ',minimum-scale=0.1,user-scalable=yes"/>');

注意：使用选项 3，您不需要删除该元素。

【讨论】：

【解决方案3】：

你可以使用属性和值选择器来移除元素：

$('meta[name="viewport"]').remove();

【讨论】：