Skip to main content
本文に 222 文字追加
ソース リンク
kunif
  • 1.8万
  • 3
  • 18
  • 28

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

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

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

機種 端末解像度(横×縦) 実質解像度(横×縦) 画素(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.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
ソース リンク
kunif
  • 1.8万
  • 3
  • 18
  • 28

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

機種 端末解像度(横×縦) 実質解像度(横×縦) 画素(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デザイン導入方法」
レスポンシブのブレイクポイントを設定する前に知っておくべきこと