Evgenii Evgenii - 1 year ago 185
CSS Question

Where do I put viewport meta tag in jsfiddle

In jsFiddle I need to put viewport metatag in the

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 Source

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 */
<!-- access to the HEAD element -->

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

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

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


$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download