JavaScriptに関するお知らせ

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

【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;
}

解決策2

本来の背景色(薄めの色)は#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さんに謎アニメーションやめてほしい:(



PREV
2019-05-10
【JS】console.logは戻り値が無いのでもっと使いやすい関数を作る

NEXT
2019-05-14
【JS】もうすぐ増税なのでJavaScriptの税込みの美しい求め方について-前編