Где добавить метатег viewport в jsfiddle

В jsFiddle мне нужно поставить метадаг viewport в элемент head. Но поскольку jsFiddle уже включает теги html, head и body, он показывает предупреждение: "Нет необходимости в HTML-теге, он уже находится на выходе".

Есть ли способ установить метадаг в viewport в голову?

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

Ответы

Ответ 1

Один из способов редактирования тега jsFiddle head - использовать панель CSS style hack.

Если необходимо отредактировать заголовок, можно закрыть элемент 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" />');

Ответ 2

Основываясь на CSS-стилевом стиле hack, упомянутом Saturnix, я создал шаблон jsFiddle, готовый для вас к fork (уже с метафорой в viewport 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>

Ответ 3

Методы, показанные в других ответах, фактически не работают.

  • Метод jQuery не работает, он помещает теги в html, но это бесполезно, поскольку это происходит после того, как сервер отображает страницу
  • Метод CSS не работает, потому что эти теги должны быть первыми в голове и помещают их в нижнее

Единственный способ, по которому я действительно тестировал мой jsFiddles на мобильном устройстве, - это использовать php для получения содержимого скрипта и изменить его, чтобы вставить теги в верхней части head.

Это php script Я написал для этого:

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

Чтобы использовать этот script, просто запустите его где-нибудь в Интернете и вызовите его с помощью URL-адреса jsFiddle в качестве параметра url get like:

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

Ответ 4

Как ранее заявляли другие (но скрытые ниже складки в комментариях), ни один из ответов не будет работать.

Встраиваемый jsfiddle помещает ваш код внутри iframe. Метатег viewport применяется, только если он находится на самой внешней странице. Посмотрите эту ошибку, которую я подал с помощью jsfiddle для примеров: https://github.com/jsfiddle/jsfiddle-issues/issues/1094.

Существует действительно только одно решение для размещения файлов самостоятельно. И если у вас есть место для публикации html файла, вам больше не нужна скрипка. Если вы действительно хотите беспокоиться, вам просто нужно добавить заголовок на свою собственную страницу, а затем добавить в него jsfiddle.

Однако, если вы просто хотите посмотреть, что он будет отображать как на мобильном устройстве на вашем собственном рабочем столе, не публикуя сам файл, вы можете сделать следующее:

  • скопируйте встроенный URL-адрес результата в браузер Chrome.
  • откройте инструменты разработчика.
  • на вкладке source в инструментах dev, отредактируйте тег "... как HTML...".
  • вставить метатег: <meta name="viewport" content="width=device-width, initial-scale=1" />
  • щелкните вне окна редактирования, чтобы применить изменение.
  • переключите панель инструментов устройства и выберите мобильное устройство по вашему выбору.