一画面(高さ100%)のWebサイトを作成する

カテゴリ フロントエンド

タグ

一画面(高さ100%)のサイトを作成する場合の対応方法。

[HTML] 構成

HTMは以下の構成とする。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <p>Hello world!</p>
  </div>
  <script src="script.ts"></script>
</body>
</html>

通常は reset.css などを使えばよいが、ブラウザ標準で bodyp に余計なマージンが入るためこれを消しておく。

style.css

body, p {
  margin: 0;
}

[CSS] 100vh ではなく100% を使う

100vh(画面の高さ)という便利な単位がありますが、これで対応してはいけない。

style.css

.container {
  height: 100vh;
}

100vh はスマホではアドレスバーを含んだ高さとなってしまうため、縦スクロールができてしまう。

html までの親要素をすべて含め、height: 100% を設定すること。

style.css

html, body, .container {
  height: 100%;
}

[JS] スマホChromeのスクロール更新を無効化する

スマホChromeでは下に引っ張ることで更新できる機能 (Pull-to-Refresh) がある。

これを無効化するときにCSSので解決しようと試みると、iOSのChromeで、変わらずPull-to-Refreshができてしまう。

style.css

body {
  overscroll-behavior-y: none;
}

そのため上記の設定はせず、JSでスクロールを無効化する。

script.ts

(() => {
  document.addEventListener('touchmove', touchmove, {
    passive: false,
  })

  function touchmove(ev: TouchEvent) {
    ev.preventDefault()
  }
})()

ev.preventDefault() を使うために、addEventListener() の第3引数のオプションに passive: false を設定する必要がある。

上記の処理でもタッチした座標は取得できるため、その後JSで制御することができる。

まとめ

まとめると以下のようになりました。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <p>Hello world!</p>
  </div>
  <script src="script.ts"></script>
</body>
</html>

style.css

body, p {
  margin: 0;
}

html, body, .contaner {
  height: 100%;
}

script.ts

(() => {
  document.addEventListener('touchmove', touchmove, {
    passive: false,
  })

  function touchmove(ev: TouchEvent) {
    ev.preventDefault()
  }
})()