今からsrcsetをおさえておきたいけどあきらめた!

雑記帳
スポンサーリンク


srcsetが実装されたとして、iPhone RetinaとMac Retinaの住み分けはどうやるんだろうか。
たとえば、640×320で表示したい場合

<img src="640×320.jpg" srcset="1280×640.jpg 2x" />
と記述するわけだけども、これだとiPhone Retinaにとっては大きすぎるし、非Retinaスマホでも大きすぎる。

そこで、viewportも指定できるらしいので、書くとすればこうか。複数指定がわからんけど。
<img src="640×320.jpg" srcset="1280×640.jpg 2x, 320×160.jpg 320w, 640×320.jpg 640w" />
これでちゃんとPCでは640×320.jpg
Mac Retinaには1280×640.jpg
iPhone Retina(iPhone5とか)では640×320.jpgが表示されるのだろうか。
viewport指定あたりがあやしいな。

結局のところ、やりたいのは以下のとおり

ディスプレイ表示画像
非Retina mobile320×160
Retina mobile640×320
非Retina PC640×320
Retina Mac1280×640

うーん。実際にsrcsetが実装されないことにはどうすればいいのかもわからない。
またMacRetinaを持ちあわせていないので、そちらも確認できないしなぁ。

今のうちから把握しておきたいのだけど、実際にsrcsetに対応するまで今のままでいくのがいいのかなぁ。

それとも、Retina.jsでやっておいて、srcsetが実装されたら、併用するか。
Retina.jsとsrcsetどちらが優先されて表示されるのかもわからないけど。

コメント

  1. […] 今からsrcsetをおさえておきたいけどあきらめた! ↩ […]

タイトルとURLをコピーしました