用jQuery更改视口元标记

我想知道是否有可能在页面加载之前使用jquery添加元标记到html页面。我之所以问，是因为我有一个没有视口元标记的页面，它应该只有当分辨率下降到700px以下 - <meta name="viewport" content="width=device-width, initial-scale=1"/>用jQuery更改视口元标记

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

在此先感谢！

来源

2014-08-27 AB.

@AndyHolmes - 有一个视口'< meta name =“viewport”content =“width = device-width，initial-scale = 1”/>'当我们多次改变方向时，会导致页面在平板电脑上溢出。 – 2014-08-27 09:22:01

意识到我的评论！哈哈。检查我的答案:) – 2014-08-27 09:22:37

你应该用CSS处理这个问题。如果视口标签在平板电脑或台式机上造成问题，那么您的CSS编码严重不足！ – Cameron 2014-08-27 09:24:51

使用jQuery你可以做如下所示：

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

EDIT

具有由默认视口标签，然后取出它上面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"/>'); 
}

来源

2014-08-27 09:21:25

谢谢，但是页面已经加载时不会发生上述情况吗？不幸的是，我需要在页面加载之前添加元标记 - 如果可能的话。 – 2014-08-27 09:25:49

然后在默认情况下将其删除> 700 – 2014-08-27 09:26:24

@AB。看到编辑:) – 2014-08-27 09:32:15

-1

试试这个（你不需要/在meta标签结束了）：

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

来源

2014-08-27 09:20:00 Zak

当然可以尽快jQuery库被加载和头部是在DOM注册：

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

来源

2014-08-27 09:20:24 Axel

用jQuery更改视口元标记

回答

相关问题