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

特別為iPhone設計網頁

香港愈來愈多用戶利用iPhone手機上網,作為一個負責任的網頁設計師,我們有必要照顧這群iPhone用戶﹗但怎樣呢﹖

首先我們必須要知道iPhone的內置瀏覽器Safari的特性。iPhone版本的Safari跟桌面版最大的分別當然是它的顯示大小。iPhone版本的最佳解析度是480像素,亦即是說你的780px網頁將會在iPhone上怪怪的顯示出來﹗要解決這問題,我們可以從user-agent string著手,iPhone的user-agent string是這樣的︰

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+

我們可以透過分析這個user-agent string來把iPhone的用戶導引到特別為iPhone設計的網頁。當然若果你的網頁像我們一樣是CSS主導的話,你只要簡單的在LINK tag裡加上

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

然後在有關的Style Sheet設定內容為480px就可以了:

#mainContent {
width: 480px;
}

另一點要注意的是Safari會自動為網頁做放大縮小的,假如你的網頁需要Scroll的話,Safari會自動為你縮小到一整頁,結果當然是會變得十分難看了。要解決此問題,你可以加入以下的header tag︰

<meta name="viewport" content="width=480, initial-scale=1, user-scalable=no">

若你容許用戶自行放大縮小的話,你可以把user-scalable設為yes。

Apple為iPhone的網頁設計及開發人員是供了一個iPhone開發專頁,可以參考一下。

原文網址:
https://www.aveego.com/html/o_36338_0_/特別為iphone設計網頁.html
原文作者︰

更多網頁設計新聞

我們的客戶

我們的客戶