Question

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

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

提前致谢！

Answer 1

使用jQuery，您可以执行以下操作：

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

修改

要默认使用视口标记，请将其删除到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"/>'); }

Answer 2

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

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

Answer 3

当加载jQuery库并且头部在DOM上注册时，你肯定可以：

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

用jquery更改视口元标记

3 个答案: