我在 jsFiddle 中需要将 viewport metatag 放在 head 元素中。但由于 jsFiddle 已经包含了html、head和body标签，它会显示一个警告:“不需要HTML标签，输出中已经有了。”
有没有一种方法可以将 viewport metatag 放在 head 中？
<meta name="viewport" content="width=device-width, initial-scale=1" />
4个回答
25
编辑 jsFiddle 的 head 标签的一种方法是使用CSS 面板 style hack。
如果需要编辑标题，可以关闭
style元素并访问标题。完成所有修改后，请再次打开style标签。
/* your custom CSS */
</style>
<!-- access to the HEAD element -->
<style>
将上述代码插入CSS面板中将更改标签下的CSS部分为
<style type='text/css'>
/* your custom CSS */
</style>
<!-- access to the HEAD element -->
<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" />');
- Saturnix
4
1当我查看嵌入页面的源代码时，我没有在任何地方看到我的 meta 标签（而且它似乎不起作用）。 - Michael
2我正在我的iPhone上运行iOS 9.0.1，但它对我来说不起作用。我还尝试了其他示例，但实际上我找不到创建JSFiddle移动友好页面的方法。 - neoDev
jQuery方法不起作用，它将标签放入HTML中，但这是无用的，因为它发生在服务器呈现页面之后，而CSS方法不起作用，因为这些标签必须首先出现在头部，这会使它们靠近底部。 - Wesley Smith
我认为这些方法都行不通了，因为jsfiddle强制'Result'在iframe中显示，只有window.top.document的viewport meta标签才会被识别。这些方法只能修改iframe的文档。试图修改window.top.document会遇到安全限制，因为域名是严格不同的。 - Jason Kleban
2
根据Saturnix提到的CSS面板样式黑客，我在jsFiddle上创建了一个模板供您分叉使用（已包含视口meta标记）：
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>
- Andreas
1
其他答案中展示的方法实际上都不起作用。
1. jQuery方法无法工作，它将标签放入html中，但是这毫无意义，因为它发生在服务器呈现页面之后。 2. CSS方法也无法工作，因为这些标签必须位于head的开头，而这会把它们放在底部附近。
我发现唯一真正能够测试移动设备上jsFiddles的方法是使用php获取fiddle内容，并修改以将标签插入到head的顶部。
以下是我编写的php脚本:
1. jQuery方法无法工作，它将标签放入html中，但是这毫无意义，因为它发生在服务器呈现页面之后。 2. CSS方法也无法工作，因为这些标签必须位于head的开头，而这会把它们放在底部附近。
我发现唯一真正能够测试移动设备上jsFiddles的方法是使用php获取fiddle内容，并修改以将标签插入到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获取参数调用它，如：
- Wesley Smith
1
1我喜欢你的态度 ;) - Andras Deak -- Слава Україні
1
正如其他人所述（但在评论中被隐藏），没有一个答案能够解决问题。
jsfiddle嵌入将您的代码放置在iframe中。只有当它在最外层页面上时，viewport meta标签才会应用。请参阅我在jsfiddle上提交的此错误报告以获取示例：https://github.com/jsfiddle/jsfiddle-issues/issues/1094。
实际上只有一种解决方案，就是自己托管文件。如果您有一个发布html文件的地方，那么您就不需要fiddle了。如果您真的想麻烦，您只需要将头部添加到自己的页面中，然后将jsfiddle嵌入其中。
然而，如果您只想在自己的桌面上查看移动设备的渲染效果而不发布文件，则可以执行以下操作：
- 将嵌入结果URL复制到Chrome浏览器中。
- 打开开发者工具。
- 在开发者工具的源标签中，编辑“...作为HTML...”标记。
- 插入以下meta标记：
<meta name="viewport" content="width=device-width, initial-scale=1" /> - 单击编辑窗口外部以应用更改。
- 切换设备工具栏并选择您喜欢的移动设备。
- Todd Currie
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<head>等内容。 - user56reinstatemonica8