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