一募书、關(guān)于移動(dòng)端兼容性
目前針對(duì)跨終端的方案块饺，主要分為兩大陣營：一套資源Vs兩套資源。
第一種是通過響應(yīng)式或頁面終端判斷去實(shí)現(xiàn)一套資源適配所有終端泣懊；
第二種是通過終端判斷分別調(diào)取兩套資源以適配所有終端咕痛。
這兩種思路我們并不能斬釘截鐵的說哪一個(gè)更優(yōu)選，正所謂”合適的才是最好的”距误。
思路一:通過響應(yīng)式或頁面終端判斷去實(shí)現(xiàn)一套資源適配所有終端
優(yōu)勢(shì)：只需維護(hù)一套資源簸搞，維護(hù)成本較低扁位。
劣勢(shì)：需加載適配各個(gè)終端的各個(gè)資源，在不同終端通過響應(yīng)式布局實(shí)現(xiàn)不同展現(xiàn)趁俊，部分交互效果需要在頁面中做終端判斷域仇，代價(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é)按需加載，以提高頁面加載速度挡逼，css預(yù)處理器 的變量括改、運(yùn)算、嵌套等特性可大大提高手動(dòng)計(jì)算響應(yīng)式的效率家坎，媽媽再也不用擔(dān)心我把比例算錯(cuò)了嘱能。當(dāng)然后兩者可參考需求及成本決定是否采用。
思路二:通過終端判斷分別調(diào)取兩套資源以適配所有終端
優(yōu)勢(shì)：可根據(jù)不同端做個(gè)性設(shè)計(jì)及個(gè)性化信息推送且可按需加載虱疏，如移動(dòng)端可配合重力感應(yīng)惹骂、不同手勢(shì)做各種炫酷拽效果，pc頁面可不受流量限制做適合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é)來說簡直是不二之選跪但！
終端適配目前一般通過ua判斷來實(shí)現(xiàn)履羞。ua判斷可放在服務(wù)端也可放在頁面中，在代理服務(wù)器中做跳轉(zhuǎn)更快屡久、更 準(zhǔn)確且不走應(yīng)用程序?qū)右涫祝词篂g覽器禁用了js依然可以跳轉(zhuǎn)到相應(yīng)的地址，同時(shí)秉承著公共服務(wù)放在服務(wù)端這樣的云端服務(wù)理念被环，我們選擇了通過代理服務(wù)器做終端適配糙及。
User-Agent嗅探，即Web瀏覽器發(fā)送一個(gè)Web頁面或資源請(qǐng)求時(shí)筛欢，會(huì)發(fā)送一個(gè)User-Agent首部作為HTTP請(qǐng)求的一部分浸锨，那么我們就可以在服務(wù)器端獲取想要的信息唇聘，進(jìn)而判斷并引導(dǎo)用戶到達(dá)相應(yīng)的頁面地址。
二柱搜、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)端上可以顯示，只不過出現(xiàn)了橫向滾動(dòng)條而已健爬。
（一）幾個(gè)概念
1.css像素
html中度量的單位 用px來計(jì)算控乾，在pc中往往 1 css px ＝ 1 物理像素
css像素時(shí)抽象和相對(duì)的了，在不同設(shè)備中1px對(duì)應(yīng)不同的設(shè)備像素娜遵；iphone3分辨率是320*480 即 css 1px ＝ 1個(gè)物理像素阱持；iphone4 分辨率640x960但屏幕尺寸沒有改變，意味著同一塊區(qū)域像素多了1倍 即 css 1px ＝2個(gè)物理像素魔熏；
2.物理像素
表示每英寸所擁有的像素?cái)?shù)目衷咽，數(shù)值越高，代表屏幕能夠以更高的密度來顯示圖像
3.分辨率
顯示器所能顯示的像素多少蒜绽，顯示器可以顯示的像素越多镶骗，畫面就越精細(xì)，同樣的屏幕區(qū)域能顯示的信息就越多
4.devicePixelRatio
window.devicePixelRadio = 物理像素/css像素 在iphone4中devicePixelRatio＝2 也就是1css像素＝2個(gè)物理像素
devicePixelRatio在不同瀏覽器中存在一些兼容性問題躲雅，并不是完全可靠的
5.layout viewport
移動(dòng)設(shè)備的默認(rèn)viewport,css布局是以layout viewport 來做為參考系計(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è)備屏幕寬度，使得無論在什么分辨率下相赁，那些針對(duì)ideal viewport設(shè)計(jì)的網(wǎng)站都可以完美的呈現(xiàn)給用戶相寇。
（二）如何實(shí)現(xiàn)屏幕適配
需要用到
<meta name="viewport" content="width=device-width">
meta viewport 中有6個(gè)通用屬性：
width 設(shè)置layout viewport的寬度 正整數(shù)或字符串 'width-device'
initial-scale 設(shè)置頁面的初始縮放值，數(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來達(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)頁加載是隱藏頂部的地址欄和底部的導(dǎo)航欄
（三）相關(guān)代碼講解
//移動(dòng)頁面設(shè)計(jì) 480*854的比例
//dpi = 480/screen.width*window.devicePixelRatio*160;
//scalevalue = screen.width/480;
//控制適配 分為5種組合
/* width ＋ target-densitydpi(計(jì)算出來的) */
<meta name="viewport" content="width=480,target-densitydpi=dpi,minimal-ui">
/* width */
<meta name="viewport" content="width=480,minimal-ui">
/* width+target-densitydpi=device-dpi */
<meta name="viewport" content="width=480,targrt-densitydip=device-dip,minimal-ui">
/* width+initial-scale */
<meta name="viewport" content="width=480,initial-scale=scalevalue,maximum-scale=scalevalue,minimum-scale=scalevalue,minimal-ui">
/* targrt-densitydpi */
<meta name="viewport" content="targrt-densitydpi=dpi,minimal-ui">
//通過順序設(shè)置5次來實(shí)現(xiàn)適配 直到
Math.abs(window.innerWidth-480)<=10 表示viewport設(shè)置正確了。
四）橫豎屏
js代碼控制
window.addEventListener("orientationchange",function () {
This.isOrietation = true;
This.changeOriention();
});
//建議執(zhí)行橫豎屏的事件都通過一個(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){...}
