viewport(視口)許多智能手機都使用了一個比實際屏幕尺寸大很多的虛擬可視區域，主要目的就是讓pc頁面在智能手機端閱讀時不會因為實際可視區域變形。所以你看到的頁面還是普通樣式，即一個全局縮小后的頁面。為了讓智能手機能根據媒體查詢匹配對應樣式，讓頁面在智能手機中正常顯示，特意添加了一個meta標簽。這個標簽的主要作用就是讓智能手機瀏覽頁面時能進行優化，并且可以自定義界面可視區域的尺寸和縮放級別。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">含義為：寬為手機移動設備默認寬度，初始縮放比例為1.0，最大縮放比例為原始像素大小，不允許用戶放大或者縮小;如何識別手機尺寸通過設置meta語句：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />width 可視區域的寬度,值可為數字或關鍵詞device-width；height 可視區域的高度,關鍵詞device-height；initial-scale 頁面首次被顯示時的縮放級別（0-10.0），取值為1時頁面按實際尺寸顯示，無任何縮放minimum-scale 設定最小縮小比例（0-10.0），取值為1時將禁止用戶縮小至實際尺寸之下maximum-scale 設定最大放大比例（0-10.0），取值為1時將禁止用戶放大至實際尺寸之上user-scalable 設定用戶是否可以縮放（yes/no），一般情況下允許device-width 設備屏幕的寬度值很多人常常使用initial-scale=1到非響應式網站上，這會讓網站以100%寬度渲染而不會自動縮放，用戶需要手動移動頁面或者縮放。請記住：如果你的網站不是響應式的，請不要使用initial-scale或者禁用縮放。 meta忽略Android平臺中對郵箱地址的識別<meta name="format-detection" content="email=no" />當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后，safari上已看不到效果 -->將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可選default、black、black-translucent -->隱藏狀態欄<meta name="apple-mobile-web-app-status-bar-style" content="blank" />blank:消失，空白iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉<meta name="format-detection" content="telephone=no" />detection[d?‘tek?(?)n]偵查 rem1.rem是什么?rem(font size of the root element)是指相對于根元素的字體大小的單位2.為什么web app要使用rem？實現強大的屏幕適配布局(淘寶,騰訊,網易等網站都是rem布局適配)rem能等比例適配所有屏幕,根據變化html的字體大小來控制rem的大小,在html上根據不同分辨率設置不同font-size，通過js計算出來- 頁面里除了font-size之外的其它css尺寸都使用rem作為單位- 正文的font-size需要額外的媒介查詢，并且不使用remvw、vhvw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。vmin：vw和vh中較小的那個。vmax：vw和vh中較大的那個。vw, vh, vmin, vmax：IE9 局部支持，chrome/firefox/safari/opera支持，iOS safari 8 支持，Android browser4.4 支持，chrome for android39支持 dpr(設備像素比)設備像素比（device pixel ratio）設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關系設備像素比＝物理像素／設備獨立像素（邏輯像素在x方向或者y方向） 物理像素（physical pixel）一個物理像素是顯示器（手機屏幕）上最小的物理顯示單元，在操作系統的調度下，每一個設備都有自己的顏色值和亮度值，物理像素就是屏幕分辨率中所示的像素。 設備獨立像素（density-independent pixel）設備獨立像素（也叫密度無關像素），可以認為是計算機坐標系統中得一個點，這個點代表一個可以由程序使用的虛擬像素,然后由相關系統轉換為物理像素。 移動端適配公式：html{font-size:(100px/屏幕寬度的1%（?px））vw}解釋：通過用100除以當前屏幕寬度的1% 計算出100px占當前屏幕的多少vw
來源：
https://www.icode9.com/content-4-644351.html
本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請
點擊舉報。
