javascript - 使用 jquery 更改视口(viewport)元标记

标签 javascript jquery html css media-queries

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

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

提前致谢!

最佳答案

使用 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"/>');
}

关于javascript - 使用 jquery 更改视口(viewport)元标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25523284/

相关文章:

jquery - 如何将其他html的内容加载到div而不丢失css样式?

javascript - JQuery - 如何在 div 中加载内容时显示微调器?

javascript - (CSS/jQuery) 如何使用 jQuery 解决 top 和 bottom 属性之间的冲突

javascript - 是在 jQuery 中使用多个事件委托(delegate)还是在 on 中使用 if inside 更好?

php - 根据 MySQL 给出的数据更改一个下拉列表

html - 显示图像裁剪

javascript - 如何在上传到服务器之前保存 Canvas 图像?

javascript - 导航栏和整页 slider

javascript - Angularjs - ng-disabled 不能按预期工作

javascript - 从 Google 获取搜索 Url 参数到个人网站?