iPad CSS範例

基本的ipad 兩個方向：

在橫式模式下，有兩列佈局，其主要內容在左邊和右邊分為三列放置。
在直式模式下，主要內容填滿螢幕寬度和三個區塊內容區域水平放置。
兩個方向中，在頂部有一個標題和頁腳底部。
這些都改變寬度1024px，寬768px，在演示頁 裡更詳細的示意圖像素尺寸。
下面是在iPad演示佈局模擬器截圖：

如何工作的呢？

第一件事情是鎖定佈局，使每個像素與iPad的屏幕的像素以1:1的比例，做下面的META標籤：

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

鎖定佈局以1:1的比例防止變焦和滿分，這通常發生當iPad是旋轉（正常，橫向模式是縮小跨越1024個像素的寬度的網頁被顯示的，因為，相對於直式模式下，寬度只有768px）。

接下來，在直式和橫式模式，用CSS規則改變佈局，通常覆蓋其中的一些在底部的CSS文件時，該設備是在肖像模式下使用@ media規則。
這裡是一個精簡版的CSS：

/*normal styles here */
#wrap {
   width:1024px;
}
@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {
      width:768px;
   }
}

Demo Download (ipad-css-layout.zip - 41kb)