我在哪里将viewport元标记放在jsfiddle中

Question

在jsFiddle中我需要将viewport元标记放在head元素中.但由于jsFiddle已经包含了html,head和body标签,它会显示一条警告:"不需要HTML标签,它已经在输出中了."

有没有办法将视口元数据放入头部？

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

Answer 1

编辑jsFiddle head标记的一种方法是使用CSS面板style黑客.

如果需要编辑标题,可以关闭style元素并访问标题.完成所有修改后,请style 再次打开标签.

/* your custom CSS */
</style>
<!-- access to the HEAD element -->
<style>

将上面的代码插入CSS面板将改变headto 的CSS部分

<style type='text/css'>
/* your custom CSS */
</style>
<!-- access to the HEAD element -->
<style>
</style>

或者,如果您在页面加载后更灵活并且可以编辑视口,则可以使用JavaScript或jQuery.

JavaScript的

var viewport = document.createElement("meta");
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1');
document.getElementsByTagName('head')[0].appendChild(viewport);

jQuery的

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