13

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

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

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

4 回答 4

25

编辑 jsFiddlehead标签的一种方法是使用CSS panel stylehack。

如果需要编辑标题，可以关闭style元素并访问标题。完成所有修改后，请再次打开style 标签。

/* your custom CSS */
</style>
<!-- access to the HEAD element -->
<style>

将上面的代码插入到 CSS 面板中，会将 CSS 部分更改head为

<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" />');
于 2013-06-05T00:36:07.800 回答
2

基于 Saturnix 提到的CSS 面板样式 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>
于 2013-12-06T11:21:13.223 回答
1

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

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

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

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

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

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

  1. jQuery 方法不起作用，它将标签放在 html 中，但这毫无价值，因为它发生在服务器呈现页面之后
  2. 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 作为urlget 参数调用它，例如：

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

于 2016-05-30T07:06:45.900 回答