使用jquery更改视口元标记 [英] change viewport meta tag with jquery
问题描述
我想知道是否可以在页面加载之前使用jquery添加元标记到html页面。
我之所以问，是因为我有一个没有视口元标记的页面，只有当分辨率降到700px以下 - < meta name =viewport内容=width = device-width，initial-scale = 1/>
原因是，我有html标记用于移动网站（使用媒体查询）&也为桌面版本的HTML标记（我没有一个适用于平板电脑）。我想确保为桌面设计的html标记在页面加载时以及在我们更改设备方向时在平板电脑上正确呈现。
预先感谢！
使用jQuery，您可以像下面这样做：
if（$（window）.width（）<700）{
$（'head'）。append（'< meta name =viewportcontent =width = device-width ，初始缩放= 1/>'）;
}
编辑
默认使用视口标记，然后将其移除到699px以上： HTML：
< HEAD>
< meta name =viewportcontent =width = device-width，initial-scale = 1/>
< / head>
jQuery：
if（$（window）.width（）> 699）{
$（'head'）。remove（'< meta name =viewportcontent =width = device-width ，初始缩放= 1/>'）;
}
I was wondering if it is possible to add a meta tag using jquery to an html page before the page loads.
The reason why I ask, is because I have a page with no viewport meta tag on and it should have it only when the resolution drops below 700px - <meta name="viewport" content="width=device-width, initial-scale=1"/>
The reason being, I have html markup for mobile site (using media queries) & also html markup for desktop version ( I don't have one for tablets). I want to make sure html markup designed for desktop is rendered properly on tablet on page load and also when we change the device orientation.
Thanks in advance!
Using jQuery you can do it like the following:
if ($(window).width() < 700) {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
}
EDIT
To have the viewport tag by default, then remove it above 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"/>');
}
这篇关于使用jquery更改视口元标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
