html - ビューポートのメタタグをjsfiddleのどこに置くのですか

Question

jsFiddle では、head要素にビューポート メタタグを配置する必要があります。しかし、jsFiddle には既に html、head、および body タグが含まれているため、「HTML タグは必要ありません。既に出力に含まれています。」という警告が表示されます。

ビューポートのメタタグを頭に入れる方法はありますか?

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

Answer 1

jsFiddle のheadタグを編集する 1 つの方法は、 CSS パネルstyleハックを使用することです。

ヘッダーを編集する必要がある場合は、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" />');