一黎比、關(guān)于移動(dòng)端兼容性
???? 目前針對(duì)跨終端的方案超营，主要分為兩大陣營(yíng)：一套資源Vs兩套資源。
第一種是通過(guò)響應(yīng)式或頁(yè)面終端判斷去實(shí)現(xiàn)一套資源適配所有終端焰手；
第二種是通過(guò)終端判斷分別調(diào)取兩套資源以適配所有終端糟描。
這兩種思路我們并不能斬釘截鐵的說(shuō)哪一個(gè)更優(yōu)選，正所謂”合適的才是最好的”书妻。
思路一:通過(guò)響應(yīng)式或頁(yè)面終端判斷去實(shí)現(xiàn)一套資源適配所有終端
優(yōu)勢(shì)：只需維護(hù)一套資源船响，維護(hù)成本較低。
劣勢(shì)：需加載適配各個(gè)終端的各個(gè)資源躲履，在不同終端通過(guò)響應(yīng)式布局實(shí)現(xiàn)不同展現(xiàn)见间，部分交互效果需要在頁(yè)面中做終端判斷，代價(jià)較大工猜，若圖片資源為一套米诉，部分圖片在超高分辨率設(shè)備（例如iphone系列）下會(huì)失真，且在非wifi情況下即使加了延時(shí)加載也易出現(xiàn)加載慢的情況篷帅。
技術(shù)選型：jquery（或原生js等）+ 響應(yīng)式 + 前端模塊加載器（seajs或RequireJS等）+ css預(yù)處理器（sass 或less等）史侣。jquery較好的兼容性配合響應(yīng)式可相對(duì)代價(jià)較小地實(shí)現(xiàn)跨終端。前端模塊加載器主要負(fù)責(zé)按需加載魏身，以提高頁(yè)面加載速度惊橱，css預(yù)處理器 的變量、運(yùn)算箭昵、嵌套等特性可大大提高手動(dòng)計(jì)算響應(yīng)式的效率税朴，媽媽再也不用擔(dān)心我把比例算錯(cuò)了。當(dāng)然后兩者可參考需求及成本決定是否采用。
思路二:通過(guò)終端判斷分別調(diào)取兩套資源以適配所有終端
優(yōu)勢(shì)：可根據(jù)不同端做個(gè)性設(shè)計(jì)及個(gè)性化信息推送且可按需加載正林，如移動(dòng)端可配合重力感應(yīng)泡一、不同手勢(shì)做各種炫酷拽效果，pc頁(yè)面可不受流量限制做適合pc端的效果觅廓。
劣勢(shì)：需維護(hù)兩套資源鼻忠，維護(hù)成本增加。
技術(shù)選型：zepto（或xui等移動(dòng)端輕量級(jí)框架）+ 響應(yīng)式 + 前端模塊加載器 + css預(yù)處理器 + 終端適配哪亿。zepto作為jquery的移動(dòng)端版本粥烁，依然延續(xù)其自身優(yōu)勢(shì)贤笆，大幅優(yōu)化了移動(dòng)端API且摒棄了兼容”非現(xiàn)代瀏覽器”的冗余代碼蝇棉，成為移動(dòng)端輕 便可用的js框架代表，對(duì)于習(xí)慣了jquery的同學(xué)來(lái)說(shuō)簡(jiǎn)直是不二之選芥永！
終端適配目前一般通過(guò)ua判斷來(lái)實(shí)現(xiàn)篡殷。ua判斷可放在服務(wù)端也可放在頁(yè)面中，在代理服務(wù)器中做跳轉(zhuǎn)更快埋涧、更 準(zhǔn)確且不走應(yīng)用程序?qū)影辶桑词篂g覽器禁用了js依然可以跳轉(zhuǎn)到相應(yīng)的地址，同時(shí)秉承著公共服務(wù)放在服務(wù)端這樣的云端服務(wù)理念棘催，我們選擇了通過(guò)代理服務(wù)器做終端適配劲弦。
User-Agent嗅探，即Web瀏覽器發(fā)送一個(gè)Web頁(yè)面或資源請(qǐng)求時(shí)醇坝，會(huì)發(fā)送一個(gè)User-Agent首部作為HTTP請(qǐng)求的一部分邑跪，那么我們就可以在服務(wù)器端獲取想要的信息，進(jìn)而判斷并引導(dǎo)用戶到達(dá)相應(yīng)的頁(yè)面地址呼猪。
二画畅、pc上的網(wǎng)站在移動(dòng)端上怎么辦？
? 如果把移動(dòng)端的可視區(qū)域(320-768)的話宋距，大部分網(wǎng)站都會(huì)因?yàn)樘@示錯(cuò)亂轴踱；所以瀏覽器默認(rèn)把viewport設(shè)置為一個(gè)較寬的值 980px或1024px，至少保證PC網(wǎng)站在移動(dòng)端上可以顯示谚赎，只不過(guò)出現(xiàn)了橫向滾動(dòng)條而已淫僻。
（一）幾個(gè)概念
? 1.css像素
html中度量的單位 用px來(lái)計(jì)算，在pc中往往 1 css px ＝ 1 物理像素
css像素時(shí)抽象和相對(duì)的了壶唤，在不同設(shè)備中1px對(duì)應(yīng)不同的設(shè)備像素雳灵；iphone3分辨率是320*480 即 css 1px ＝ 1個(gè)物理像素；iphone4 分辨率640x960但屏幕尺寸沒(méi)有改變视粮，意味著同一塊區(qū)域像素多了1倍 即 css 1px ＝2個(gè)物理像素细办；
? 2.物理像素
表示每英寸所擁有的像素?cái)?shù)目，數(shù)值越高，代表屏幕能夠以更高的密度來(lái)顯示圖像
? 3.分辨率
顯示器所能顯示的像素多少笑撞，顯示器可以顯示的像素越多岛啸，畫面就越精細(xì)，同樣的屏幕區(qū)域能顯示的信息就越多
?? 4.devicePixelRatio
window.devicePixelRadio = 物理像素/css像素 在iphone4中devicePixelRatio＝2 也就是1css像素＝2個(gè)物理像素
devicePixelRatio在不同瀏覽器中存在一些兼容性問(wèn)題茴肥，并不是完全可靠的
??? 5.layout viewport
移動(dòng)設(shè)備的默認(rèn)viewport,css布局是以layout viewport 來(lái)做為參考系計(jì)算的
document.documenElement.clientWidth 獲取
該尺寸時(shí)動(dòng)態(tài)設(shè)置
??? 6.visual viewport
代表瀏覽器窗口的尺寸坚踩，當(dāng)用戶放大瀏覽器時(shí)這個(gè)尺寸就會(huì)變小
window.innerWidth 獲取
??? 7.ideal viewport
屏幕尺寸 設(shè)備屏幕的尺寸 單位是物理像素
screen.width 獲取 屏幕尺寸是不變的
在該viewport中用戶不需要縮放和橫向滾動(dòng)就可以正常查看網(wǎng)站的所有內(nèi)容
設(shè)置移動(dòng)端網(wǎng)站一般以這個(gè)viewport為準(zhǔn),ideal viewport 的寬度等于設(shè)備屏幕寬度，使得無(wú)論在什么分辨率下瓤狐，那些針對(duì)ideal viewport設(shè)計(jì)的網(wǎng)站都可以完美的呈現(xiàn)給用戶瞬铸。
（二）如何實(shí)現(xiàn)屏幕適配
需要用到
1
meta viewport 中有6個(gè)通用屬性：
width 設(shè)置layout viewport的寬度 正整數(shù)或字符串 'width-device'
initial-scale 設(shè)置頁(yè)面的初始縮放值，數(shù)字或小數(shù)
minimum-scale 允許用戶的最小縮放值 數(shù)字或小數(shù)
maximum-scale 允許用戶的最大縮放值 數(shù)字或小數(shù)
height 設(shè)置layout viewport 的高度础锐，這個(gè)屬性很少用到
user-scaleabel 是否允許用戶進(jìn)行縮放 'no'或‘yes’ 還有2個(gè)需要特別注意的兩個(gè)屬性
target-densitydpi 在andriod 4.0一下的設(shè)備中嗓节，不支持設(shè)置viewport的width，android 自帶瀏覽器支持設(shè)置 target-densitydpi來(lái)達(dá)到目的皆警；
target-densitydpi = UI-width/device-width*window.devicePixelRation*160
//UI-width: 布局寬度
//device-width:屏幕分辨率寬度 iphone4為640
//target-densitydpi=device-dpi 標(biāo)示使用設(shè)備本身物理屏幕的像素,不會(huì)發(fā)生默認(rèn)縮放
miniual-ui ios的safari為meta表天新增的屬性拦宣，在網(wǎng)頁(yè)加載是隱藏頂部的地址欄和底部的導(dǎo)航欄
? （三）相關(guān)代碼講解
//移動(dòng)頁(yè)面設(shè)計(jì) 480*854的比例
//dpi = 480/screen.width*window.devicePixelRatio*160;
//scalevalue = screen.width/480;
//控制適配 分為5種組合
/* width ＋ target-densitydpi(計(jì)算出來(lái)的) *//* width *//* width+target-densitydpi=device-dpi *//* width+initial-scale *//* targrt-densitydpi *///通過(guò)順序設(shè)置5次來(lái)實(shí)現(xiàn)適配 直到
Math.abs(window.innerWidth-480)<=10 表示viewport設(shè)置正確了。
（四）橫豎屏
js代碼控制
window.addEventListener("orientationchange",function () {
? ? ? ? This.isOrietation = true;
? ? ? ? This.changeOriention();
? ? });
//建議執(zhí)行橫豎屏的事件都通過(guò)一個(gè)偵聽完成信姓，做一個(gè)統(tǒng)一的管理鸵隧；在屏幕橫豎屏切換完成之后再執(zhí)行相應(yīng)的事件
css控制
//定義橫屏顯示的樣式
@media screen and(orientation:landspace){...}
//定義豎屏顯示的樣式
@media screen and(orientation:portrait){...}
//某個(gè)尺寸的特殊樣式 豎屏?xí)r寬度為768px 符合一般ipad的條件
@media only screen and(orientation:portrait) and(device-width:768px){...}
