手機網頁設計-Html viewport meta 說明

最近因為研究手機網頁相關的資料,並且幫忙協助開發.想跟大家分享一下有關viewport meta 這部分的指令

大家如果用IE 或 Firefox 開啟一個手機版的網頁,然後檢視一下該網頁的原始碼,就可以看到原始碼中有加了這行的code

<meta name="viewport" content="width=device-width;
initial-scale=1.0; maximum-scale=3.0; user-scalable=1;" />

我就此行code 進行一下說明:

content=”width=device-width — 畫面為裝置的寬度,當然我們也可以更改設定為

content=”width= 480px –畫面寬度為480px

initial-scale=1.0 就是起始畫面比例為1

maximum-scale=3.0 設定最大放大比例為3倍

usrer-scalable=1 使用者可以放大縮放 這個值為boolen 值 1的話代表yes 可以縮放, 0 的話則為no, 不可以縮放

所以如果要讓網頁畫面可以縮放的話,請設定為1, P.s 需注意網頁畫面圖案的解析度,如果解析度或圖片大小太小的話,放大的時候,圖片就會模糊

Share

Tags:

3 Responses to "手機網頁設計-Html viewport meta 說明"

Leave a Comment