スプレッドシートとGASで作るWebアプリのスマホ表示が縮小して表示される

スプレッドシートとGASを使って簡単なWEBアプリを作成していた時に、軽くハマってしまったのでメモ。

現象

HTML内に<meta name="viewport" content="width=device-width, initial-scale=1">を入れても、スマホで表示した時に適切な大きさで表示されない（要素が小さく表示される）。

解決方法

コード.gsに

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

を記述する。
（HTML内に記述しても効果がなかった。）

また、コード.gsに記述する場合でも、addMetaTagの実行順序が関係する可能性もありそう。

template.evaluate()（テンプレートの組み立て）と addMetaTag()（タグの追加）の順番、または setTitle() との組み合わせによって、metaタグが正しく挿入されていないのかもしれない。

• setTitle よりも先に addMetaTag を先にチェーン（連結）した
• evaluate() の直後に .addMetaTag() をチェーン（連結）した

上記どちらかの理由（またはその両方）により、無事に表示されるようになった。

参考にした記事