2014年9月19日

iPhone 6 Plus の devicePixelRatio と apple-touch-icon

iPhone 6 PlusのdevicePixelRatioとapple-touch-iconのサイズを調べてみました。

devicePixelRatio


まず、devicePixelRatioは「3」でした。てっきり、devicePixelRatioが「2」で表示サイズは「540×960px相当」になると思っていたので意外でした。

サンプル

さらに驚いたのが、表示サイズが「414×736px相当」という中途半端な値だったことです。これを3倍すれば「1242×2208px」で、これをフルHDディスプレイにスケーリングして表示しているということでしょうか。

しかし、スクリーンショットの画像サイズを確認すると「1152×2048px」で、これまた謎です。

まぁよくわかりませんが、とりあえず表示幅としては、一般的なAndroidスマホよりも少し広い程度です。画面を横向きにしても幅736px相当なので、レスポンシブWebデザインのサイトで、PC向けの表示をするのは難しそうです。

apple-touch-icon


アイコンサイズは、iPad Retinaディスプレイと同じ「152×152px」かと思っていたのですが、devicePixelRatioが「3」なら、これでは小さすぎます。

アップルのデベロッパーサイトの「Icon and Image Sizes」という項目によると、iPhone 6 PlusのWebクリップアイコン(apple-touch-icon)のサイズは、標準サイズ(60×60px)の3倍となる「180×180px」とのことです。

しかし、試しに「apple-touch-icon-180x180.png」というファイルを設置してみても、そのサイズのアイコンが表示されず、iPhone向けの「apple-touch-icon-120x120.png」が表示されます。「120x120」がない場合は、iPad向けの「152x152」が表示されるようです。

原因は分かりませんが、iPhone 6 PlusでよりきれいなWebクリップアイコンを表示させるには、「180×180px」の画像を「apple-touch-icon-120x120.png」というファイル名にして設置するのがいいのかもしれません。

関連記事

0 件のコメント: