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 件のコメント:
コメントを投稿