[討論] iPad & iPhone 網頁設計
最近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
推
04/05 00:21, , 1F
04/05 00:21, 1F
→
04/05 09:54, , 2F
04/05 09:54, 2F
→
04/05 10:05, , 3F
04/05 10:05, 3F
→
04/05 10:25, , 4F
04/05 10:25, 4F
推
04/05 14:36, , 5F
04/05 14:36, 5F
推
04/05 19:40, , 6F
04/05 19:40, 6F
→
04/05 19:41, , 7F
04/05 19:41, 7F
→
04/05 19:43, , 8F
04/05 19:43, 8F
→
04/06 18:00, , 9F
04/06 18:00, 9F
討論串 (同標題文章)
以下文章回應了本文 (最舊先)：
完整討論串 (本文為第 1 之 4 篇)：