2016年10月7日

iPhone/iPad画面サイズによる違い まとめ

1.iPhone画面サイズ

[table id=6 /]

2017年春(予定)
7.9 インチ 320×480 iPad pro
9.7 インチ →10.1インチに変更

2.iPad画面サイズ

[table id=7 /]

3.画面イメージ

iPhone用画像データ    iPad用画像データ

simulator-screen-shot-2016-10-07-16-40-43  simulator-screen-shot-2016-10-07-16-33-30

4.背景画像の表示イメージ

 ・左上を基準に等倍で表示する。

  4インチ画面の表示    5.5インチ画面の表示
simulator-screen-shot-2016-10-07-15-15-18  simulator-screen-shot-2016-10-07-16-40-43

 

 UIImage *backgroundImage=[UIImage imageNamed:@"414_736.png"];
 self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

※iPadも同等でできそうですが、なぜか?倍率表示になってしまいました。
     (画像ファイル:414_736.png)

 ・画面サイズに合わせて、倍率変更して表示する。

4インチ画面の表示    5.5インチ画面の表示
simulator-screen-shot-2016-10-07-17-48-22  simulator-screen-shot-2016-10-07-17-47-19

 UIGraphicsBeginImageContext(self.view.frame.size);
 [[UIImage imageNamed:@"414_736.png"] drawInRect:self.view.bounds];
 UIImage *backgroundImage = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();
 self.view.backgroundColor = [UIColor colorWithPatternImage:backgroundImage];

5.注意点
・アプリによっては、背景画像フロントのボタン、ラベルが一致していないとおかしな画面に

  なってしまいます。

 ・アプリを制作する際は、対応iosバージョンで使用される最小画面サイズで、等倍表示で
作るのが
容易と言えますが、大きい画面で使用するとL字の空欄の扱いが困る点でも
あります。

 ・画面サイズによって倍率変更で表示する際は、画像とフロント項目のズレが発生する
ことや、
フロント項目の大きさを画面サイズに合わせて柔軟に変更する必要があり
  ます。画面サイズも、均等に大きくなっていないので、意図しない見切れが発生する
ケースが出てしまいます。
  縦と横では、縦のサイズの比率が大きくなっています。そのため、縦方向への比率が
高いので画像の作りに工夫が必要です。