Question

在jsFiddle中我需要将viewport metatag放在head元素中。但由于jsFiddle已经包含了html，head和body标签，它会显示一条警告：“不需要HTML标签，它已经在输出中。”

有没有办法将视口元标记放在头部？

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

Answer 1

编辑jsFiddle head标记的一种方法是使用CSS panel style hack。

如果需要编辑标题，可以关闭style元素   并访问标题。完成所有修改后，请打开style   再次标记。
/* your custom CSS */
</style>

<style>
将上述代码插入CSS面板会将head的CSS部分更改为
<style type='text/css'>
/* your custom CSS */
</style>

<style>
</style>

或者，如果您在加载页面后更灵活并且可以编辑视口，则可以使用JavaScript或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" />');

Answer 2

根据Saturnix提到的CSS panel style hack，我在jsFiddle上创建了一个模板，准备你分叉（已包含视口元标记）：

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

这里有css的代码供您参考：

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

Answer 3

其他答案中显示的方法实际上并不起作用。

jQuery方法不起作用，它将标记放在html中，但由于它是在服务器呈现页面后发生的，所以没有价值
CSS方法不起作用，因为这些标签必须首先在头部并且将它们放在底部附近

我发现在移动设备上真正测试我的jsFiddles的唯一方法是使用php获取小提琴内容并修改它以在head的顶部插入标签。

这是我写的那个php脚本：

<?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;
}

要使用此脚本，只需将其托管在线，并使用您的jsFiddle网址作为url获取参数进行调用，如：

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

Answer 4

正如其他人先前所说（但在评论中隐藏在下方），没有一个答案可行。

jsfiddle嵌入将您的代码放在iframe中。视口元标记仅在最外层页面上应用。请参阅我向jsfiddle提交的这个错误示例：https://github.com/jsfiddle/jsfiddle-issues/issues/1094。

实际上只有一种解决方案可以自己托管文件。如果你有一个发布html文件的地方，那么你就不再需要小提琴了。如果你真的想打扰，你只需要将标题添加到你自己的页面，然后添加嵌入的jsfiddle。

但是，如果您只想在自己的桌面上查看移动设备上的内容而不自行发布文件，则可以执行以下操作：

将嵌入的结果网址复制到Chrome浏览器中。
打开开发人员工具。
在开发工具的源标签中，编辑标签“... as HTML ...”。
插入元标记： <meta name="viewport" content="width=device-width, initial-scale=1" />
在编辑窗口外单击以应用更改。
切换设备工具栏并选择您选择的移动设备。

我在哪里将viewport元标记放在jsfiddle中

4 个答案:

的JavaScript

的jQuery

这是我写的那个php脚本：