日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。
今回は background-image についての思い出話
自分が初めて自作のウェブページを作成し、レンタルサーバーを借りてアップロード、実機確認をした時の話…
「chromeデベロッパーツールで一通りのバグは確認した！ついに実機テストだ！」
色々調べて、やっとの思いでサイトのアップロードを完了させ、実機のPCでサイトのチェックを無事に済ませ、次に実機のスマホでサイトにアクセスしてみると…
「背景がなんかコレジャナイ…」
デベロッパーツールでは問題がなかったのに、実際のスマートフォンで確認すると、背景画像が正常に表示されない…
原因を調べた結果、以下の事が判明しました。
原因
background-size: cover; と background-repeat: no-repeat; を設定した状態で、PC用の画像サイズの大きなファイルを background-image に設定すると、デベロッパーツール上のスマートフォン表示では背景が正常に表示されるが、実機のスマートフォンでは元画像の左上部分が拡大表示されていた。
↓
デベロッパーツール上ではPCのモニタサイズを基準にしてスマートフォンのモニタサイズを計算し、PCのモニタ上でスマホの画面表示を再現している。
↓
しかし、デベロッパーツールと実機のスマートフォンは基準にしているモニタサイズがそもそも違う為、実際のスマートフォンよりも大幅に大きな画像や、アスペクト比の異なる画像を設定すると、スマートフォンの実機表示の際に background-size: cover; が正しく適応されなくなる為だと思われる。（※別の原因があったら逆に教えて欲しいです）
その後、PCのモニタサイズに合わせた画像で、PCとスマートフォンの両方で background-size: cover; が正しく機能する方法を探したのですが、最終的に見つけることは出来ませんでした。しかし、以下の方法で対策が可能だと判明しました。
対処法
１・メディアクエリを設定し、PC用の背景画像とスマートフォン用背景画像を複数用意する。
２・スマートフォンのモニタサイズに合わせた、画像端の繋ぎ目がループするシームレス加工された画像を使用＋background-repeat: repeat; の設定
当時の自分は画像の加工があまり得意ではなかった為、対処法・２で対策しました。
※ちなみに、当たり前といえば当たり前なのですが…背景画像をスマートフォンのモニタサイズ基準にリサイズした場合、スマートフォン表示では正常に表示されますが、今度はPC表示にした際に元サイズの小さな画像が background-size: cover; でPCのモニタサイズまで引き延ばされるため、元々の画質を維持することが出来ません。
今回はこれで以上になります。
あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。