特別為iPhone設計網頁 (2008-12-01)
香港愈來愈多用戶利用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的網頁設計及開發人員是供了一個專頁，可以參考一下。
http://developer.apple.com/iphone/
