スマホと高解像度ディスプレイに合わせた指定
本日の教材動画はこちら
今回はスマートフォンや、高解像度ディスプレイにどう画面表示を合わせるかを勉強していきましょう。
スマートフォンの「フィット」機能に対応する
スマホはPC向けのWEBページも見ることができるようになってます。これはブラウザが画面の解像度を、ページの表示に合わせる「フィット機能」が搭載されているからです。おかげで私たちはPC用のページを綺麗に見ることができますが、このフィット機能が作動すると、折角用意したメディアクエリが正しく反映されないことがあります。
フィット機能への対策
次のmetaタグをhead内に組み込んであげることで対策することができます→＜meta name="viewport" content="width=device-widht"＞。これで画面の幅にデバイスの幅を合わせるという指定になるようです。今までmetaタグは＜meta charset="UTF-8"＞のみ記載してましたが、これとは別にもう一行metaタグを増やす形になりますね！
googleは＜meta name="viewport" content="width=device-width, initial-scale=1"＞という記述方法を推奨しているようですし、調べてみたらやはりこちらのほうが実際に使われているようですので、利用する際は最後に一文つけ足して記述したほうがよさそうです。最後の一文の意味は「CSS ピクセルとデバイス非依存ピクセルが 1:1 の関係になるように指定」だそうです。
高解像度ディスプレイに対応する
Apple製品などに採用されてるRetinaディスプレイなどの高解像度ディスプレイは、表示が一般的なサイズの半分程度に縮小されて表示されることがあります。これは1ピクセルに対して2つのピクセルを使用して表示することで高解像度を実現しているからで、1ピクセルの大きさが普通のディスプレイと異なっています。なので想定していた文字サイズより小さかったり、画像なども小さく表示される結果になります。
高解像度ディスプレイへの対策
高解像度ディスプレイへの対策としては、medelia特性に次の部分を追記する形します→「-webkit-device-pixel-ratio:2 」最後の数字が1の場合は通常のディスプレイ、2の場合はRetinaディスプレイとなります。
これだけだとよくわからないので、実例のCSSを見てみたところ
@media (-webkit-min-device-pixel-ratio: 2)
{.class {background-image: url(image-2x.png);}}
こんな感じの記述になるみたいです。 これは「retinaディスプレイの場合、このクラスの背景画像はこっちのpngを利用する」という内容になるのかな？
ただこれはAppleがRetinaディスプレイを開発した際にWebKitを独自に拡張したものらしく、標準規格ではありません。じゃあ標準規格はどれだ？って話なんですが、標準規格は「resolution」という記述を用いるみたいです。
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx)
{.class {background-image: url(image-2x.png);}}
使い方としてはこんな感じのようです。この記載をしておけば色んなブラウザで対応可能となるようです。
正直何が何だがよくわかりませんが、この2つの記載をしておけば困ったことにならなさそうなので、サイトを作るときはひとまず上記をコピペして使えばいいのかな？！と思いました。…いや、ちゃんと参考サイト色々目を通したんですけどね…私には少々難しくて「なるほどね？？！！」ってならなかっただけなので、みなさんはきちんと下記参考サイト様達に目を通して理解を深めておくことをお勧めします…。
【参考サイト】
フィット機能への対応
コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて
viewportとは？設定方法とスマートフォン（android・iphone）で効かない原因
高解像度ディスプレイへの対応
