HTML5學習總結 番外05 移動終端適配

2022-02-02 15:26:58 字數 862 閱讀 7551

在使用移動端裝置瀏覽網頁時,移動端瀏覽器是直接把整個頁面放到乙個虛擬的檢視裡來顯示的,通常來說這個虛擬的檢視大小會比手機螢幕大,使用者可以通過手勢操作來平移、縮放這個檢視。

如果不加view標籤,那麼輸入以下**,檢視頁面,會發現頁面是可以縮放的。

1 禁用viewport縮放功能

在頁面頭部加上如下語句來禁用viewport的縮放特性,那麼頁面就不可以縮放了。

"

viewport

" content="

width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no

" />

完整**如下:

如上我們viewport初始化時便適配裝置瀏覽器的寬度,且無法縮放,該meta標籤具體引數如下:

width:viewport 的寬度,可以指定乙個固定值,如650;或者可以是device-width,表示裝置的寬度。

height:和 width 相對應,可指定高度。

initial-scale:頁面初始縮放比例(0-1

)maximum-scale:允許使用者縮放到的最大比例(0-1

)minimum-scale:允許使用者縮放到的最小比例(0-1

)user-scalable:使用者是否可以手動縮放(yes/no)

2 css3 media queries響應式布局

可以使用media標籤在不同解析度下的移動裝置使用不同的樣式,語法如下。具體可以參考另外一篇部落格響應式布局 

HTML5學習總結 番外05 移動終端適配

在使用移動端裝置瀏覽網頁時,移動端瀏覽器是直接把整個頁面放到乙個虛擬的檢視裡來顯示的,通常來說這個虛擬的檢視大小會比手機螢幕大,使用者可以通過手勢操作來平移 縮放這個檢視。如果不加view標籤,那麼輸入以下 檢視頁面,會發現頁面是可以縮放的。1 禁用viewport縮放功能 在頁面頭部加上如下語句來...

HTML5學習總結 番外05 http 狀態碼

所有狀態碼彙總 1xx 臨時響應 表示臨時響應並需要請求者繼續執行操作的狀態 說明 100 繼續 請求者應當繼續提出請求。伺服器返回此 表示已收到請求的第一部分,正在等待其餘部分。101 切換協議 請求者已要求伺服器切換協議,伺服器已確認並準備切換。2xx 成功 表示成功處理了請求的狀態 說明 20...

HTML5學習總結

我的部落格歡迎討論啊,又問必答哦 音訊canvas web儲存 input型別 表單元素 表單屬性 標籤 width 320 height 240 controls controls src g 桌面 1.mp4 type video mp4 your browser does not suppor...