質問: 今、開発中のiPadアプリのiPad Pro対応をしているのですが、 ・9.7インチモデル ・10.5インチモデル ・12.7インチモデル に対応させないといけないのですが、 例えば、hogehoge.pngって画像がありまして、 これを表示させたい場合、 9.7インチモデルでは、hogehoge.pngファイルが表示されます。 12.7インチモデルでは、hogehoge@2x.pngファイルが表示されます。 困ったのは、10.5モデルで、このモデルの場合も 12.7インチモデルと同じ、hogehoge@2x.pngが 表示されてしまいます。 10.5インチモデルでは、10.5インチ用のhogehoge.pngを 表示したいのですが、どうすれば宜しいでしょうか。 hogehoge@1.5x.png みたいな対応になるのでしょうか。 分かる方おられましたら、 ご教授お願い出来ますでしょうか。 宜しくお願いいたします。
回答: それぞれのメディアクエリの値が以下になるようです。 ``` 機種 端末解像度(横×縦) 実質解像度(横×縦) 画素(ppi) デバイスピクセル比 12.7 2,048px×2,732px 1,024px×1,366px 264 ppi 2.0 10.5 1,668px×2,224px 834px×1,112px 264 ppi 2.0 9.7 1,536px×2,048px 768px×1,024px 264 ppi 2.0 ``` CSS/srcsetのブレイクポイント値が9.7インチの768px×1,024pxになっているのでしょう。 10.5インチの834px×1,112pxに変更するか、いっそ3種類に分けるとかすれば良いのでは無いでしょうか。 参考サイト iPad Proの解像度はいくら?ディスプレイを徹底検証! 10.5インチiPad Proのメディアクエリは、縦 834 px 横 1112 px CSSテクニック CSS3: 最新 Bootstrap 対応 iOS メディアクエリのテンプレート srcset属性について メディアクエリの書き方「レスポンシブwebデザイン導入方法」 レスポンシブのブレイクポイントを設定する前に知っておくべきこと 第三世代機の記事があったので追記:実質解像度とデバイスピクセル比は推測した値 ``` 機種 端末解像度(横×縦) 実質解像度(横×縦) 画素(ppi) デバイスピクセル比 12.9 2,048px×2,732px 1,024px×1,366px 264 ppi 2.0 11.0 1,668px×2,388px 834px×1,194px 264 ppi 2.0 ```