我在哪里把视口元标记在jsfiddle [英] Where do I put viewport meta tag in jsfiddle

问题描述

在jsFiddle我需要把视口元标记在头元素。但由于jsFiddle已经包含html，head和body标签，它显示一个警告：不需要HTML标签，它已经在输出中了。

In jsFiddle I need to put viewport metatag in the head element. But since jsFiddle already includes html, head and body tags, it shows a warning: "No need for the HTML tag, it's already in the output."

viewport metatag in the head？

Is there a way to put viewport metatag in the head?

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

推荐答案

编辑jsFiddle的 head 标记是使用 CSS面板 style hack 。

One way to edit a jsFiddle's head tag is to use the CSS panel style hack.

如果需要编辑标题， style 元素
并访问标题。所有修改后，请再次打开 style
标签。

If there is a need to edit the header, one can close the style element and access the header. After all modifications, please open the style tag again.

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

将上述代码插入CSS面板将会更改头到

Inserting the above code into the CSS panel will change the CSS section of the head to

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

或者，如果你有点更灵活，在页面加载后编辑视口，您可以使用JavaScript或jQuery。

Alternatively, if you're a bit more flexible and are okay with editing the viewport after the page has been loaded, you may use JavaScript or jQuery.

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

jQuery

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

这篇关于我在哪里把视口元标记在jsfiddle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！