.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
