我在哪里将视口元标记放在 jsfiddle 中答案

【问题标题】：Where do I put viewport meta tag in jsfiddle我在哪里将视口元标记放在 jsfiddle 中
【发布时间】：2013-06-05 00:22:50
【问题描述】：

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

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

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

【问题讨论】：

jsbin 和 codepen 都做 jsfiddle 所做的事情，同时还允许访问 <head> 等

标签： html css jsfiddle

【解决方案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" />');

【讨论】：

当我查看嵌入页面的源代码时，我在任何地方都看不到我的元标记（实际上，它似乎不起作用）
我在我的 iPhone 上运行 iOS 9.0.1，但它对我不起作用，我也尝试了其他示例，但实际上我找不到创建 JSFiddle 移动友好页面的方法
jQuery 方法不起作用，它将标签放在 html 中，但这毫无价值，因为它发生在服务器呈现页面之后，而 css 方法不起作用，因为这些标签必须在头部，这使它们靠近底部
我认为这些都行不通（现在？），因为 jsfiddle 强制“结果”位于 iframe 中，并且只支持 window.top.document 的视口元标记。这些方式只修改 iframe 的文档。尝试修改 window.top.document 反而会遇到安全限制，因为域是完全不同的。

【解决方案2】：

基于 Saturnix 提到的CSS panel style hack，我在 jsFiddle 上创建了一个模板供你分叉（已经包含 viewport 元标记）：

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>

【讨论】：

【解决方案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 作为 url 获取参数来调用它，例如：

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

【讨论】：

I like your attitude ;)

【解决方案4】：

正如其他人之前所说（但隐藏在 cmets 的首屏下方），没有一个答案会起作用。

jsfiddle 嵌入将您的代码放置在 iframe 中。只有在最外层页面上才会应用视口元标记。有关示例，请参阅我使用 jsfiddle 提交的此错误：https://github.com/jsfiddle/jsfiddle-issues/issues/1094。

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

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

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

【讨论】：