Re: [討論] iPad & iPhone 網頁設計
補充一些實驗結果
: 讓版面與裝置同寬
: <meta name="viewport" content="width=device-width" />
: 一開始進入的縮放程度
: <meta name = "viewport" content = "initial-scale = 1.0">
: 以下這行就是維持點對點，不允許使用者縮放畫面
: <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
這邊比較有意思的是iPad可以任意放大縮小網頁，所以...
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
這行寫法雖然在一開始會讓1:1點對點生效
但rotate到landscape之後仍然會維持原本portrait的寬度
然後放大給你看（把768寬度的網頁放大到1024寬）
解決的辦法是
<meta name = "viewport" content = "maximum-scale=1.0,
initial-scale = 1.0, user-scalable = no">
再加上 maximum-scale=1.0 就對了
這樣在rotate的時候會重新讓內容去對應轉動後viewport的寬度
另
如果想要landscape,portrait採用不同的css
寫法如下
<link rel="stylesheet" media="all and (orientation:portrait)"
href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)"
href="landscape.css">
這裡有一個說明
http://www.cloudfour.com/ipad-css/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 210.64.16.123
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 4 之 4 篇)：