GAS HTMLServiceで無理やりスマートフォン対応してみる

GAS HTMLServiceではHTMLテンプレート内でviewportを設定してもデバイスごとの表示最適化がされません。
これは作成したテンプレートが自動生成されるHTML中にiframeとして挿入されるためです。
そのためテンプレートの方でwidthをいじってスマートフォンの解像度に合わせたとしても余白が出来てしまいます。

そこで、スマートフォンで余白が出来ないようにiframeの中身を拡大表示する関数を作ってみました。

function resizeHtml(){
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  var scale = 980 / w;
  var transX = (scale - 1) * w / 2 / scale;
  var transY = (scale - 1) * h / 2 / scale;
  document.body.style.webkitTransform = "scale("+scale+") translate("+transX+"px, "+transY+"px)";
}

ページの読み込み時やiframeの大きさが変わる度にこの関数を実行することで、スマートフォンでも見やすい表示を保つことができます。
body要素の幅を400px程度に設定しておくと丁度良い大きさになるかと思います。

ちなみにiPhoneではiframeのスクロールが効かないようです。。。
１画面に収まるように高さを調整しましょう。