HTML5 - 手機網頁禁止縮放相關設定
viewport 可以設定的屬性分別如下,
width:可設定數值,或者指定為 device-width
height:可設定數值,或者指定為 device-height
initial-scale:第一次進入頁面的初始比例
minimum-scale:允許縮小最小比例
maximum-scale:允許放大最大比例
user-scalable:允許使用者縮放,1 or 0 (yes or no)
最初執行viewport meta加入如下
<meta name="viewport" content="width=device-width, initial-scale=1.0">
編譯過程會轉化成如下的語意,
@viewport {
width: device-width;
initial-scale: 1.0
}
基本說明
width=device-width
先提一下幾個注意的地方,首先在 viewport 裡面的 width 通常會看到設定為device-width ,主要是為了讓整個頁面寬度與手機可視寬度相同,如此就可以簡單相容於不同機型螢幕大小,如果這邊width 沒有設定的話,就會依照 html css 給予的 width 當作預設值。
因為解析度不同,device-width 有時候不一定是 view width ,所以在類似 iphone 4 高解析度機器上,device-width=320 ,可是實際解析度為 480,這時候就需要利用javascript 針對UA 下去做動態調整。
user-scalable
從屬性名稱來看就是允許開啟、關閉的設定,使用者能否放大、縮小頁面,如果頁面不允許手機使用者縮放,就直接設定為 0,或者 no,反之要啟動縮放功能,給予 1或者是 yes。
接下來將說明幾種常用的方式,以及測試驗證提供給大家參考。
基本寬度(並不是指 html body width),
<meta name="viewport" content="width=300px">
基本高度
<meta name="viewport" content="height=300px">
禁止使用者放大縮小
<meta name="viewport" content="user-scalable=0">
<meta name="viewport" content="user-scalable=no">
基本款式,
<meta name="viewport" content="width=device-width">
初始檢視 n 放大,(這裡使用 x 10.0)
<meta name="viewport" content="width=device-width, initial-scale=10.0">
限制最大放大比例
<meta name="viewport" content="width=device-width, maximum-scale=15.0">
限制最小縮小比例(數值必須為正值)
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
假設設定數值
放大議題
initial-scale=10.0
maximum-scale=15.0
可以很簡單得知,一開始就是 x 10.0,最大可放大到 x 15.0,如果變化一下
initial-scale=15.0
maximum-scale=10.0
可以發現,初始的放大比例會變成 x 15.0,最大放大比例 還是 x 15.0
*初始、最大值,以最大值為主*。
縮小議題
接著討論縮小,一開始設定數值,
initial-scale=5.0
minimum-scale=1.0
初始值 x 5.0,最小縮小值 x 1.0,如果將數值反過來之後會發現,
initial-scale=1.0
minimum-scale=5.0
初始值 x 1.0,最小縮小值 x 1.0
初始、最小值,以最小為主。
initial-scale=1.0
minimum-scale=5.0
maximum-scale=0.1
init x 1.0, max x 1.0, min x 1.0,無法放大縮小。
viewport meta 其他參考
另外提供給大家幾個viewport 的使用方式,
如果在手機端我們希望網頁呈現固定,不希望使用者隨意縮放,直接設定如下
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果希望在不同 device 使用不同縮放大小,就必須使用 javascript,偵測UA(User agent),動態設定viewport,片段程式如下,
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');
HTML5實現端訪問時禁止移動網頁內容,禁止放大和縮小顯示網頁,也就是若雙指放大進會提示該頁不能縮放,程式碼中包括了禁止移動和允許移動兩種方法。
可以移動
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
不可以移動
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
width:可設定數值,或者指定為 device-width
height:可設定數值,或者指定為 device-height
initial-scale:第一次進入頁面的初始比例
minimum-scale:允許縮小最小比例
maximum-scale:允許放大最大比例
user-scalable:允許使用者縮放,1 or 0 (yes or no)
最初執行viewport meta加入如下
<meta name="viewport" content="width=device-width, initial-scale=1.0">
編譯過程會轉化成如下的語意,
@viewport {
width: device-width;
initial-scale: 1.0
}
基本說明
width=device-width
先提一下幾個注意的地方,首先在 viewport 裡面的 width 通常會看到設定為device-width ,主要是為了讓整個頁面寬度與手機可視寬度相同,如此就可以簡單相容於不同機型螢幕大小,如果這邊width 沒有設定的話,就會依照 html css 給予的 width 當作預設值。
因為解析度不同,device-width 有時候不一定是 view width ,所以在類似 iphone 4 高解析度機器上,device-width=320 ,可是實際解析度為 480,這時候就需要利用javascript 針對UA 下去做動態調整。
user-scalable
從屬性名稱來看就是允許開啟、關閉的設定,使用者能否放大、縮小頁面,如果頁面不允許手機使用者縮放,就直接設定為 0,或者 no,反之要啟動縮放功能,給予 1或者是 yes。
接下來將說明幾種常用的方式,以及測試驗證提供給大家參考。
基本寬度(並不是指 html body width),
<meta name="viewport" content="width=300px">
基本高度
<meta name="viewport" content="height=300px">
禁止使用者放大縮小
<meta name="viewport" content="user-scalable=0">
<meta name="viewport" content="user-scalable=no">
基本款式,
<meta name="viewport" content="width=device-width">
初始檢視 n 放大,(這裡使用 x 10.0)
<meta name="viewport" content="width=device-width, initial-scale=10.0">
限制最大放大比例
<meta name="viewport" content="width=device-width, maximum-scale=15.0">
限制最小縮小比例(數值必須為正值)
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
假設設定數值
放大議題
initial-scale=10.0
maximum-scale=15.0
可以很簡單得知,一開始就是 x 10.0,最大可放大到 x 15.0,如果變化一下
initial-scale=15.0
maximum-scale=10.0
可以發現,初始的放大比例會變成 x 15.0,最大放大比例 還是 x 15.0
*初始、最大值,以最大值為主*。
縮小議題
接著討論縮小,一開始設定數值,
initial-scale=5.0
minimum-scale=1.0
初始值 x 5.0,最小縮小值 x 1.0,如果將數值反過來之後會發現,
initial-scale=1.0
minimum-scale=5.0
初始值 x 1.0,最小縮小值 x 1.0
初始、最小值,以最小為主。
initial-scale=1.0
minimum-scale=5.0
maximum-scale=0.1
init x 1.0, max x 1.0, min x 1.0,無法放大縮小。
viewport meta 其他參考
另外提供給大家幾個viewport 的使用方式,
如果在手機端我們希望網頁呈現固定,不希望使用者隨意縮放,直接設定如下
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果希望在不同 device 使用不同縮放大小,就必須使用 javascript,偵測UA(User agent),動態設定viewport,片段程式如下,
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');
HTML5實現端訪問時禁止移動網頁內容,禁止放大和縮小顯示網頁,也就是若雙指放大進會提示該頁不能縮放,程式碼中包括了禁止移動和允許移動兩種方法。
可以移動
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
不可以移動
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
您好,請問版主,我採用限制禁止使用者放大縮小,,手機頁面卻變成電腦版頁面,請問哪裡有錯?謝謝
回覆刪除少了 name="viewport"
刪除