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

标签： html css jsfiddle

4条回答

闹够了就滚

2楼-- · 2019-02-02 17:12

The methods shown in other answers dont actually work.

The jQuery method does not work, it puts the tags in the html but that is worthless since it happens after the server renders the page
The CSS method does not work, because these tags have to be first in the head and that puts them near the bottom

The only way I have found to truly test my jsFiddles on mobile is to use php to get the fiddle content and modify it to insert the tags at the top of the head.

This is the php script I wrote to do that:

<?php

if(isset($_GET['url'])){

    $url = $_GET['url'].'show/light/';

    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_BINARYTRANSFER, true);
    curl_setopt($ch, CURLOPT_REFERER, $url);
    $content = curl_exec($ch);
    curl_close($ch);

    $pattern = "/<head>([^;]*); charset=UTF-8\">/";
    $replacement = "<head>\n<meta charset='utf-8'>\n<meta http-equiv='X-UA-Compatible' content='IE=edge'>\n<meta name='viewport' content='width=device-width, initial-scale=1'>";
    echo preg_replace($pattern, $replacement, $content);
    exit;
}
else{
    echo 'You must provide a jsFiddle url via the get parameter "url" like: ?url=http://jsfiddle.net/abcdef';
    exit;
}

To use this script, simply host it somewhere online and call it with your jsFiddle's url as the url get parameter like:

http://dodsoftware.com/shared-resources/php/jsfiddle-bs-fix.php?url=http://jsfiddle.net/ivangrs/v3ajg1wx/

0人赞添加讨论(0) 举报

ら.Afraid

3楼-- · 2019-02-02 17:14

As previously stated by others (but hidden below the fold in the comments) none of the answers will work.

The jsfiddle embed places your code inside of an iframe. The viewport meta tag is only applied if it's on the outermost page. See this bug I filed with jsfiddle for examples: https://github.com/jsfiddle/jsfiddle-issues/issues/1094.

There is really only one solution, to host the files yourself. And if you have a place to publish an html file, then you don't really need the fiddle anymore. If you really want to bother, you simply need to add the header to your own page, then add the jsfiddle embed to that.

However, if you just want to see what it will render like on mobile on your own desktop without publishing the file yourself you can do the following:

copy the embedded result url into a chrome browser.
open the developer tools.
in the source tab in the dev tools, edit the tag "... as HTML...".
insert the meta tag: <meta name="viewport" content="width=device-width, initial-scale=1" />
click outside of edit window to apply the change.
toggle the device toolbar and select the mobile device of your choice.

0人赞添加讨论(0) 举报

The star\"

4楼-- · 2019-02-02 17:20

Based on the CSS panel style hack mentioned by Saturnix, I created a template on jsFiddle ready for you to fork (already with the viewport meta tag included):

http://jsfiddle.net/andreasbossard/9c3gS/

Here the code of the css for your reference:

<style type='text/css'>
/* your custom CSS \*/
</style>
<!-- access to the HEAD element -->
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
<style>
</style>

0人赞添加讨论(0) 举报

三岁会撩人

5楼-- · 2019-02-02 17:26

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>

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

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

0人赞添加讨论(0) 举报