當小小的iPhone App住進大大的iPad世界裡

iPhone App可以在iPad上順利地運行著，但iPhone App天生的尺寸和iPad完全不同 ，當小小的iPhone App住進大大的iPad世界裡，它會變成什麼模樣呢 ? 接下來彼得潘將以一個小小的iPhone App做實驗，在App的畫面上顯示以下4個UI元件
(1) 和status bar重疊的藍色長方形1號 ，frame設為（0, 0, 320, 20)
(2) 橘色長方形 ，frame設為 (0, 20, 320, 20)
(3) 彼得潘的朋友，iOS App正妹工程師Yvonne的美麗照片，大小設為(300, 300)，置於畫面中央。

正妹的照片當然不會只有一張，為了讓App更加漂亮，彼得潘決定加入2張圖片，girl.jpg和girl@2x.jpg，讓同時擁有retina和非retina iPhone的朋友可以同時欣賞兩張不同的照片。

                                                                            girl.jpg

                                                                          girl@2x.jpg

在進一步了解無聊程式碼前，讓彼得潘先稍微介紹一下這位iOS和Android App開發雙通，百年難得一見的奇才朋友吧:  Yvonne是多才多藝的雙子座，喜歡動物，家裡養著可愛的貓咪，girl.jpg正是她和家貓甜蜜的合照，girl@2x.jpg則是她喝著下午茶，準備喝完繼續努力開發下一個百萬App。

(4) 藍色長方形2號，frame設為 (0, 460, 320, 20)

程式碼:

- (void)viewDidLoad
{
    [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.

    NSLog(@"scale %f", [UIScreen mainScreen].scale);
 
    UIView *topView1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 20)];
    topView1.backgroundColor = [UIColor blueColor];
    [self.view addSubview:topView1];
 
    UIView *topView2 = [[UIView alloc] initWithFrame:CGRectMake(0, 20, 320, 20)];
    topView2.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:topView2];
 

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];
    imageView.center = self.view.center;
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    imageView.image = [UIImage imageNamed:@"girl.jpg"];
    [self.view addSubview:imageView];
 
    UIView *bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, 460, 320, 20)];
    bottomView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:bottomView];
 
 
}

當App執行後，在iPhone retina 3.5吋上顯示的模樣一如我們的預期，顯示了誘惑人放下工作，享受下午茶約會時光的正妹照片。

                                          

當App搬家到iPad上執行後，其實不用太擔心，App裡的Yvonne沒有因為放大的iPad而發胖變形。當跑在iPad without retina (768 * 1024 pixel)上，App放大為640*920 pixel的大小顯示在畫面上，邊緣則留黑邊。雖然大致上沒什麼變化，但其實有以下三點值得注意之處：

1. 採用retina圖片，即便在非retina的iPad上。這是因為Ipad畫面如此巨大，就算是非retina，還是比retina版iPhone的640*960大。因此當然可以大方一點， 顯示retina版的圖片

2. 顯示3.5吋，也就是640*960 pixel的App畫面。

3. 沒有顯示狀態列，最上面的20 points被切掉，因此實際的App畫面只有640*920 pixel，左上角的座標為(0, 20 )，這也說明了為何在iPad上少了藍色長方形1號。

當跑在iPad with retina時，則可切換顯示640*920 或  1280 * 1840 pixel，其它一切則和非retina iPad一模一樣。