2019/05/11

【HTML+CSS】iPhoneだと画面外が見えるぞ気をつけろ+解決方法

こんにちは!今日はWebアプリをMacやiPhoneで見るときの罠とその解決策についてです。

Appleのデバイスは画面外が見える

特にiPhoneに顕著に見られるのですが、縦長のページを一気にスクロールすると下端でピッタリ止まりません。

下端を通り越して30pxくらい?進んだ後に本来の位置へ押し戻されるようなアニメーションがかかります。豆腐に衝突するような感じ。わかるかな?

この30pxくらい下端にめり込んでいる時に、本来なら画面外のため表示されていない要素が一瞬見えてしまうといった現象が発生します。上下左右どこ画面端でも起こりますが、特に上下で頻発。

Webのデフォルトのbackground-color(#fff)が一瞬見えてしまいます。

特にデザイン系の方なら分かるかと思いますが、ぶっちゃけ #fffの白ってまず使わないです。白にする時でも微妙に明度落として#dddとかにしますよね:(

オシャレなページをスクロールしていったら白ベタがドーーーン!!! ってなりかねません。

特に最近流行りのダークUIとかだといきなり白が出てきたら目をやられます!目がーー

あと、画面外に隠してるコンポーネントがチラ見したりします。

body直下にdiv.wrapper作ってbackground-color設定するのはアウト!

こんなケースですねー↓

<body>
  <div id="wrapper"></div>
</body>

#wrapper {
  width: 100%;
  margin: 0 auto;
  background-color: #ddd;
}

<body>か<html>に対して背景色を指定すればok!画面外もその色になります。

<body>
  <div id="wrapper"></div>
</body>

body {
  background-color: #ddd;
}
#wrapper {
  width: 100%;
  margin: 0 auto;
}

本来の背景色(薄めの色)は#wrapperに記述したまま、<body>に対して<header>と<footer>で使ってるのと同じ色(濃い色)を記述すればより画面の境界を意識しないUIにできます!こんな感じ

<body>
  <div id="wrapper">
    <header>省略
    <main>省略
    <footer>省略
  </div>
</body>

body,
header,
footer {
  width: 100%;
  background-color: #ddd;
}
#wrapper {
  width: 100%;
  margin: 0 auto;
}

個人的にこっちがおすすめ。

本音を言うとappleさんに謎アニメーションやめてほしい:(