.addMetaTag()を使います
コード.gsにこのように書くと動いてくれました
function doGet(e) {
return HtmlService.createHtmlOutputFromFile("index")
.addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}
.htmlファイルの<head></head>の中に以下のように書いても動いてくれない
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
コード.gs
function doGet(e) { return HtmlService.createHtmlOutputFromFile("index") .addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0"); } |
意訳この機能がやること 指定したHTMLファイルを表示する メタタグのviewportを追加する |
index.html
<!DOCTYPE html> <html> <body> <button id="bt">button</button> <script> document.getElementById("bt").onclick = bt_clicked; function bt_clicked(){ alert("clicked!"); } </script> </body> </html> |
意訳ボタンを配置する ボタンがクリックされたらbt_clickedを実行する この機能がやること clicked!という文字列をアラートに出す |
実行結果
スマホで上記のWebアプリを開くと
buttonをタップするとこのようにアラートが出る
補足
viewportを設定しないとこのような表示になる
上部に表示されているこれを消す方法は今のところないようです(2018/08/04現在)
issueには上がっているようです
https://issuetracker.google.com/issues/63521070
関連記事
参考
Class HtmlOutputMetaTag
https://developers.google.com/apps-script/reference/html/html-output-meta-tag
<meta>: 文書レベルメタデータ要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta
参考
Class HtmlOutputMetaTag
https://developers.google.com/apps-script/reference/html/html-output-meta-tag
<meta>: 文書レベルメタデータ要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta