網頁設計應如何應付使用者轉動iPhone及iPad

蘋果裝置始續大賣，網頁設計公司近來收到客戶要求對iPhone和iPad進行網頁設計優化的聲音也增加不少，最簡單的做法當然是特別根據iPad或iPhone的闊度去設計網頁，但由於用戶可以隨時轉動iPhone及iPad，網頁設計師應該怎樣應付呢？今次介紹的網頁就正正幫助大家解決這個問題。



原作者Matthew James Taylor在iPad CSS Layout with landscape / portrait orientation modes的意念是先鎖定Safari的viewport大小，防止自動放大縮小，再利用不同的CSS去調較網頁闊度。

首先，在header中放入以下的代碼︰

在css設定正常的闊度1024px，然後再利用css的media query去處理橫放的iPad，css如下︰

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

簡直精彩﹗完全不需要Javascript﹗不過這個作法只在iPad有效，要真正兩者兼容，筆者暫時只懂得javascript的做法，詳情作法下次再談。



原文網址:
http://www.aveego.com/html/o_37369_/網頁設計應如何應付使用者轉動iphone及ipad.html