

今、開発中の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 みたいな対応になるのでしょうか。

分かる方おられましたら、  
ご教授お願い出来ますでしょうか。  
宜しくお願いいたします。


CC BY-SA 4.0
2018-08-30T08:17:11.087
47939
2018-11-20T09:59:57.783
2018-08-30T09:15:02.517
23788
23788
question
ios
iPadアプリのiPad Pro 10.5インチへの画像表示の対応


それぞれのメディアクエリの値が以下になるようです。

[code]

    機種　端末解像度(横×縦)　実質解像度(横×縦)　画素(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
    
[/code]

CSS/srcsetのブレイクポイント値が9.7インチの768px×1,024pxになっているのでしょう。  
10.5インチの834px×1,112pxに変更するか、いっそ3種類に分けるとかすれば良いのでは無いでしょうか。

参考サイト  
[iPad Proの解像度はいくら？ディスプレイを徹底検証！](https://www.earlyteches.com/2017/07/ipad-pro-
resolution/)  
[10.5インチiPad Proのメディアクエリは、縦 834 px 横 1112 px
CSSテクニック](https://mono96.jp/for_blogger/31512/)  
[CSS3: 最新 Bootstrap 対応 iOS
メディアクエリのテンプレート](http://www.sirochro.com/note/css3-bs-ios-mediaquery-template/)

[srcset属性について](https://qiita.com/C058/items/643a9ff2d23dfe3a0b37)  
[メディアクエリの書き方「レスポンシブwebデザイン導入方法」](https://kasegood.net/media-queries)  
[レスポンシブのブレイクポイントを設定する前に知っておくべきこと](https://deaimobi.com/breakpoint/)

* * *

第三世代機の記事があったので追記：実質解像度とデバイスピクセル比は推測した値

[code]

    機種　端末解像度(横×縦)　実質解像度(横×縦)　画素(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
    
[/code]


CC BY-SA 4.0
2018-08-30T10:02:36.840
47941
2018-11-20T09:59:57.783
2018-11-20T09:59:57.783
26370
26370
47939
answer