WEBサイトの製作、管理、とかの日記ブログです。

<<   2018年09月   >>
SunMonTueWedThuFriSat
      1
2345678
9101112131415
16171819202122
23242526272829
30      
新着記事
カテゴリ
過去ログ
コメント
検索
レスポンシブWEBデザインと高DPI
前から思ってたが、スマホやタブレットのために、
<meta name="viewport" content="width=device-width">
でページ表示時の自動ズームを無効にして端末の画面サイズにフィットさせてるが、
この方法で画面サイズに最適化させるのは、端末の解像度だけを考えた最適化であり、端末の物理的な大きさは考慮してないんだよね。

Retinaディスプレイとか呼ばれる高DPIディスプレイだと、
物理的なサイズは小さい画面でも、解像度はPCを凌駕する巨大サイズであるから、
レスポンシブWEBデザインで端末解像度に合わせた複数のレイアウトを用意していると、
WUXGAとか巨大画面に最適化されたレイアウトで表示されちゃうんだよね・・・
Retina機持ってないから実際に確認できないけど。

で、これに対応させる方法をちょっと考えてみたんだが、
<meta name="viewport">にはwidth以外にもいくつか指定方法があり、
target-densitydpi端末のDPIを指定する。
initial-scale
ブラウザの初期ズームを指定する。
minimum-scale
ズームの最小値を指定する。
maximum-scaleズームの最大値を指定する。
がある。

target-densitydpiはDPIに関する設定項目なんで、これで解決しそうな気もするが、
端末のDPIを端末の大きさにかかわらず同一に指定する機能しか無いので、レスポンシブと相反する使い方しかできないと思う。

scale系の設定は、調べても「拡大率」と解説されているページしか出てこなく、
端末画面サイズの拡大なのか、コンテンツの拡大なのかで意味が逆になってくるんでわかりにくいが、
<meta name="viewport">にinitial-scaleのみを設定し値を変えてみるとわかるが、
コンテンツの拡大率であり、数値を大きくすると画面が小さくなる。

<meta name="viewport" content="initial-scale=1">
なら
<meta name="viewport" content="width=device-width">
と似たようなことになり、Retinaの場合はサイト側で指定せずにブラウザに任せたい。

RetinaでPCサイトを表示する場合、画面解像度が下がりコンテンツが拡大されると思うので、
<meta name="viewport" content="width=device-width">
せずに、
<meta name="viewport" content="minimum-scale=1">
すれば、Retinaの場合は解像度をブラウザに任せて、他の端末ではサイト側ではminimum-scaleで表示されるようになりそうなんだが、
minimum-scaleを設定しただけでは画面サイズは変化しない。
<meta name="viewport" content="initial-scale=1">
なら変化するのだが・・・


というわけで、やはりレスポンシブした上でRetinaにも最適化させるのは、現状のWEB機能では厳しいかと・・・

この記事へのコメント
名前:
URL
コメント:
この記事へのトラックバック :
whblog 1.7