Mobile Web 手機版網頁設計顯示問題

由於目前公司有製作手機版網頁的需求
但是在手機上沒有滿版顯示的問題
上網查才知道這裡跟這裡有寫到
必須加入Viewport 這個Meta標籤
為了怕忘記，所以在這裡記錄一下

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=yes"/>

Viewport的屬性

width / height
設定該頁適合顯示的畫面大小，iPhone 看普通網頁時會將顯示像素寬度變成 980px，若想正常顯示
可使用device-width設定依行動裝置的螢幕寬度而定
initial-scale
設定預設的畫面是以多少倍的 viewport 來顯示
minimum-scale / maximun-scale
設定畫面提供縮放的最小與最大比例，值都為正數。最小值default：0.25；最大值default：10.0
通常可設定maximun-scale=1.0 防止螢幕翻轉成landscape模式後重新讓內容去對應轉動後viewport的寬度
user-scalable
設定是否能夠讓使用者縮放的功能

另外因為客戶有其他需求
像是我的最愛圖示以及將網頁新增至主畫面也要自行設定icon
於是又去拜了google大神...總算找到這裡有說明
加上以下這段可以自訂iPhone新增網頁到主畫面的icon

<link rel="apple-touch-icon" href="icon.png"/>
測試後iPhone以及Desire上可以使用
另外我的最愛圖示則是一般網頁上設定favicon.ico就可以了

其他設定
portrait模式(直式)與landscape模式(橫式)顯示不同css設定 (Opera不支援)
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

使用者將網頁加到主畫面時，可以使網址列與最下面的選單消失，使網頁變為全螢幕模式
<meta name="apple-mobile-web-app-capable" content="yes" />

強制使用者無法拉動網頁
<script type="text/javascript">
document.addEventListener("touchmove", function(event){
event.preventDefault();
}, false);
</script>