問題:移動端開發與傳統的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載入,按照所用裝置載入 ...