0

今、開発中のiPadアプリのiPad Pro対応をしているのですが、

・9.7インチモデル
・10.5インチモデル
・12.7インチモデル

に対応させないといけないのですが、
例えば、hogehoge.pngって画像がありまして、
これを表示させたい場合、

9.7インチモデルでは、hogehoge.pngファイルが表示されます。
12.7インチモデルでは、[email protected]ファイルが表示されます。

困ったのは、10.5モデルで、このモデルの場合も
12.7インチモデルと同じ、[email protected]
表示されてしまいます。

10.5インチモデルでは、10.5インチ用のhogehoge.pngを
表示したいのですが、どうすれば宜しいでしょうか。
[email protected] みたいな対応になるのでしょうか。

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

4
  • 何に対する「対応」なのかが分からないので、例えばネイティブアプリの開発であるならそうと分かるよう、もう少し具体的な情報を追記してもらった方がアドバイスも付きやすいと思います。
    – cubick
    Commented 2018年8月30日 9:06
  • コメントありがとうございます。もう少し具体的な情報を追記しようと思います。
    – beio-wolf
    Commented 2018年8月30日 9:09
  • 2
    ファイル名に@2x付きの画像は、「2倍Retinaディスプレイ用の画像ですよ」と指定していることになります。iPad Proであれば、現在販売されているものはすべて2倍Retinaのはずなので、9.7インチモデルであっても@2xの画像が使われるはずです。モデルによって切り替わるものではなかったはずです。
    – user17014
    Commented 2018年8月30日 9:16
  • 9.7インチモデルで確認してみたのですが、 ご指摘の通り、@2xの画像が表示されました。 今まで誤解しておりました。 モデルによって表示される画像を切替えたかったのですが、 その場合は、プログラムで制御しないとダメそうですね。
    – beio-wolf
    Commented 2018年8月30日 10:02

1 件の回答 1

1

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

機種 端末解像度(横×縦) 実質解像度(横×縦) 画素(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
1
  • ご回答ありがとうございます。 3種類に分ける方向で検討したいと思います。
    – beio-wolf
    Commented 2018年8月30日 10:11

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。