Question

我需要在我的网站上创建一个特定页面，使用视口元标记响应屏幕大小。视口元标记由后端的php文件生成。

目前我的viewport标记如下所示：

<meta name="viewport" id="viewport" content="width=1040"/>

我使用这个jQuery来编辑标签：

jQuery(document).ready(function(){
jQuery('meta[name="viewport"]').attr('content', 'width=device-width, initial-scale=1.0');
});

希望viewport标签会像这样：

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0"/>

我没有在jQuery中识别页面，因为我有一个允许我在各个页面上运行脚本的插件。更具体地说，我的CMS是Wordpress，我的主题是Genesis和Genesis Sandbox，我使用的是Yoast插件的SEO，以及Gravity Forms。我如何将视口元素更改为我想要的代码？

Answer 1

尝试这个......对于编码严重的网站来说，这是一个简单但合理的解决方案。

<强> 1。如果您正在使用＆＃34;元视口＆＃34;标记在＆＃34; head＆＃34;然后，下面的脚本将起作用。

jQuery(document).ready(function(){
   jQuery('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0');
})

<强> 2。如果＆＃34;元视口＆＃34;标记在＆＃34; head＆＃34;如果不存在，请使用以下脚本。

jQuery(document).ready(function(){
    jQuery("head").append('<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0"/>');
    jQuery('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0');
})

注意：请确保您使用＆＃34; jQuery库版本1.6 +＆＃34;在你的网页上。

据我说..这肯定会奏效。：）

在一个特定页面上更改视口

1 个答案: