iT邦幫忙

DAY 10
0

HTML5 & CSS3系列 第 10

30天分享(12) - HTML5 viewport <meta> 標籤

30天分享(12) - HTML5 viewport <meta> 標籤

viewport 是為了除了桌面畫面的裝置而產生,

使用viewport <meta> 標籤可以控制裝置畫面的顯示,

使用方式為 :

<meta name="viewport" content="width=device-width, user-scalable=no">

name 是指定 meta 的功能, content **** 是指定的內容,

width=device-width 代表網頁畫面將依裝置的螢幕大小為主,

user-scalable=no 是使用者無法使用觸控縮放畫面大小,相反為 yes。

也可以將畫面設定為像素固定,在不同裝置會產生不同畫面,

<meta name="viewport" content="width=500, initial-scale=1">

width=500 網頁寬度為500像素,超出寬度的畫面會被隱藏,

initial-scale=1 初始畫面為原始大小,已設成 500px 所以在任何裝置上看到的寬度都會是 500px 寬度的畫面。

<meta> 標籤通常放在網頁的 標籤裡,目的是宣告手機裝置的畫面寬度。


上一篇
30天分享(11) - HTML5 <figcaption> 標籤
下一篇
30天分享(13) - HTML5 <track> 標籤
系列文
HTML5 & CSS328

尚未有邦友留言

立即登入留言