語法
<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的寬度
通常可設定maximun-scale=1.0 防止螢幕翻轉成landscape模式後重新讓內容去對應轉動後viewport的寬度
user-scalable:設定是否能夠讓使用者縮放的功能
加上以下這段可以自訂iPhone新增網頁到主畫面的icon
<link rel="apple-touch-icon" href="icon.png"/>
其他設定
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>
<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>
資料來源:http://cfyeric.blogspot.com/2010/10/blog-post.html
沒有留言:
張貼留言