[討論] iPad & iPhone 網頁設計

[evenwu (EvenWu)]

最近iPad上市了
一些基本的情報記錄一下

iPad專用附加css
通常是配合網頁原本的css，後面再加上此css覆蓋原本的css規則

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

如果也要針對iPhone特別製作版面
就在後面再加上

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

控制版面與縮放：

讓版面與裝置同寬
<meta name="viewport" content="width=device-width" />

一開始進入的縮放程度
<meta name = "viewport" content = "initial-scale = 1.0">
1.0就是原始尺寸，也就是放圖片也會完全點對點的狀況！（實用！）
當然字體也與css設定的px尺寸完全相同

以下這行就是維持點對點，不允許使用者縮放畫面
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">

這邊網頁有全部的選項：
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
縮：
http://is.gd/be5uZ

這頁是額外可參考的文件：
http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html
裡面比較重要的是 4. Modify code that relies on CSS fixed positioning
因為iPad,iPhone裝置上螢幕的座標計算與桌面瀏覽器不太一樣
有viewport的觀念，所以沒有scroll與resize視窗這種東西
position:fixed就跟position:absolute幾乎沒什麼兩樣了

目前我比較困擾的點
有沒有同時符合：iPhone可允許縮放，然後iPad固定不允許縮放的寫法？
畢竟iPhone較小，但iPad又剛好看一頁是沒問題的...

如果真的不行....server side偵測吐不同head...也可以接受就是了
但是不會寫XD

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 210.64.16.123
推 chph:實用推
→ TonyQ:推～
→ tcw026:很簡單啊. 看user agent
→ evenwu:看user agent沒錯 但不知道怎麼寫 想請教一下
推 terrylchen:熱心推！
推 tcw026:ipad: (iPad; U; CPU OS 3_2 like Mac OS X; en-us)
→ tcw026:iPhone:  (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; e
→ tcw026:if (agent.contains('a')) include a; else include b.
→ weiyucsie:樓上不要無視opera啦:p