Gatsbyでデフォルトのmeta viewportを入れ替える

Head APIを使って<meta name="viewport" id="..." ... />を挿入しても、元々存在するviewport metaタグは残ったままになる。なので同じmetaタグが２つ発生してしまう。

これはGatsbyのデフォルトhtmlテンプレートに以下のheadが含まれているから。

<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

上記3つのmetaタグの変更はCustomizing html.js の通り行う。

cp .cache/default-html.js src/html.js
And then make modifications as needed.