立即致電查詢!
電話: 3590-9591

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

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

ipad layout with landscape portrait modes illustration

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

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

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

在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的做法,詳情作法下次再談。


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

更多網頁設計新聞

我們的客戶

我們的客戶