移動端開發視口的概念及作用

2021-09-28 18:50:38 字數 1377 閱讀 1838

問題:移動端開發與傳統的pc端開發有什麼區別?

螢幕尺寸不同(適配區別)

-----------------真機除錯:使用真的手機進行訪問。

模擬器除錯:開發**階段使用的。

手機裝置五花八門,螢幕尺寸都大不一樣,尤其是安卓端,給我們的頁面預覽帶來了一些麻煩。在實際工作中,作為開發者不可能有足夠的裝置讓我們去測試(除了測試部門),即便有,效率也特別的低,因此開發者一般都是通過瀏覽器的手機模擬器來模擬不同的裝置。

先把vscode預設設定的視口引數去掉。

問題:寫乙個div寬度為320px,使用手機端比如iphone5開啟,應該是佔滿的,但是看效果?

並沒有佔滿一行,此時html標籤的寬高是980px。

原因是因為手機端的頁面開啟的時候會在視口中開啟。

原因:歷史原因:賈伯斯發明了視口

視口:就是用於盛放網頁的容器

視口作用的過程:

移動端開啟網頁——》先把網頁在980px的視口中開啟(完美展示)——》再把視口縮放和移動端一樣大,顯示在移動端中(讓使用者可以在螢幕中看到全部的網頁)

隨著技術發展,現在已經有針對於移動端的網頁了,此時我們可以設定視口的引數,完成效果。

視口引數設定:

//width 設定視口的寬度

width=device-width //設定視口寬度為裝置的寬度(常用)。

//initial-scale 設定初始縮放比例

initial-scale=

1.0//表示不縮放

//user-scalable 設定是否允許使用者縮放

user-scalable=no //不允許使用者縮放

//maximum-scale //設定允許的最大縮放比例

maximum-scale=

1.0//可以不設定,因為都禁止使用者縮放了。

//minimum-scale 設定允許最小縮放比

minimum-scale=

1.0//可以不設定,因為都禁用使用者縮放了。

//標準寫法:

"viewport" content=

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

>

移動端web視口

移動前端中常說的 viewport 視口 就是瀏覽器顯示頁面內容的螢幕區域 總結首先看一下meta元標籤極其屬性 name viewport content width device width initial scale 1.0 maximum scale 1 user scalable no 這...

移動端web 視口

視口 viewport 問題 寫乙個div寬度為320px,使用手機端比如iphone4開啟,應該是佔滿的,但是看效果?答 並沒有佔滿一行,此時html標籤的寬度是980px。因為 瀏覽器在顯示移動端網頁時,會預設給予980px的布局空間 即 布局視口空間 什麼是視口?可以簡單理解為 瀏覽器給網頁布...

視口概念 移動端視口適配

視口 檢視視窗,頁面中html元素的顯示大小 移動端 頁面要想在移動端載入必須進行視口的適配 如果不對頁面進行調整,那麼在移動端載入頁面視口寬度都為980px 解決方案 源資訊標籤,對頁面進行設定 表示對頁面視口進行約束 1 做移動端適配新增此標籤,使得頁面不再按照980px載入,按照所用裝置載入 ...