Search code examples
htmlcssjsfiddle

Where do I put viewport meta tag in jsfiddle

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" />
Solution

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