Where do I put viewport meta tag in jsfiddle

Question

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."

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

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

Answer 1

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

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>

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>

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.

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