Google Apps Script とスプレッドシートを組み合わせた自分用の簡単なアプリを作った際に軽くハマったのでメモ。
現象
「ウェブアプリケーションとして導入」で作成した、
HTMLを返すアプリにスマホでアクセスした際に文字、要素が小さく表示され、閲覧、操作に支障が出た。
原因
<meta name="viewport"> がないため、画面とコンテンツ幅があっていない。
解決
addMetaTag() でメタタグを設定する。
CODE.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
ルートのHTMLに <meta name="viewport" content="width=device-width, initial-scale=1"> が追加されてスマホでもウインドウ幅にあった表示がされた。
試したこと
HTML 側に直接 meta タグを書いても効果なかった
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>