https://github.com/sunmaobin/sunmaobin.github.io/issues/27
http://div.io/topic/1092
移動(dòng)端相關(guān)問(wèn)題：
1活逆、border: 1px問(wèn)題
2、圖片高清問(wèn)題
3哨鸭、屏幕適配布局問(wèn)題
CSS中的1px并不等于設(shè)備的1px
在css中我們一般使用px作為單位黍檩，在桌面瀏覽器中css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素氓栈，這可能會(huì)造成我們的一個(gè)錯(cuò)覺(jué)，那就是css中的像素就是設(shè)備的物理像素驶忌。但實(shí)際情況卻并非如此戴尸，css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中琅捏，css中的1px所代表的設(shè)備物理像素是不同的生百。在為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁(yè)中，我們無(wú)需對(duì)這個(gè)津津計(jì)較柄延，但在移動(dòng)設(shè)備上蚀浆，必須弄明白這點(diǎn)缀程。在早先的移動(dòng)設(shè)備中，屏幕像素密度都比較低市俊，如iphone3杨凑，它的分辨率為320x480，在iphone3上摆昧，一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的撩满。后來(lái)隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像素密度越來(lái)越高绅你，從iphone4開(kāi)始伺帘，蘋(píng)果公司便推出了所謂的Retina屏，分辨率提高了一倍忌锯，變成640x960伪嫁，但屏幕尺寸卻沒(méi)變化，這就意味著同樣大小的屏幕上偶垮，像素卻多了一倍张咳，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的针史。
還有一個(gè)因素也會(huì)引起css中px的變化晶伦，那就是用戶縮放碟狞。例如啄枕，當(dāng)用戶把頁(yè)面放大一倍，那么css中1px所代表的物理像素也會(huì)增加一倍族沃；反之把頁(yè)面縮小一倍频祝，css中1px所代表的物理像素也會(huì)減少一倍。
一些概念
物理像素(physical pixel)
一個(gè)物理像素是顯示器（手機(jī)屏幕）上最小的物理顯示單元脆淹，在操作系統(tǒng)的調(diào)度下常空，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值。
設(shè)備獨(dú)立像素(density-independent pixel)
設(shè)備獨(dú)立像素（也叫密度無(wú)關(guān)像素）盖溺，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)漓糙，這個(gè)點(diǎn)代表一個(gè)可以由成有程序使用的虛擬像素（比如：css像素），然后由相關(guān)系統(tǒng)轉(zhuǎn)為物理像素烘嘱。
所以說(shuō)昆禽，物理像素和設(shè)備獨(dú)立像素之間存在著一定的對(duì)應(yīng)關(guān)系，這就是設(shè)備像素比蝇庭。
設(shè)備像素比(device pixel ratio )
設(shè)備像素比(簡(jiǎn)稱dpr)定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系醉鳖，它的值可以按如下的公式的得到：
設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 // 在某一方向上，x方向或者y方向
在javascript中哮内，可以通過(guò)window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr盗棵。
在css中，可以通過(guò)-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio進(jìn)行媒體查詢纹因，對(duì)不同dpr的設(shè)備喷屋，做一些樣式適配(這里只針對(duì)webkit內(nèi)核的瀏覽器和webview)。
viewport/視口
通俗的講瞭恰，移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來(lái)顯示我們的網(wǎng)頁(yè)的那一塊區(qū)域[1]逼蒙，但不一定是我們可見(jiàn)的區(qū)域。
在默認(rèn)情況下寄疏，一般來(lái)講是牢，移動(dòng)設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因?yàn)榭紤]到移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來(lái)說(shuō)都比較小陕截，所以為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站驳棱，移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由設(shè)備自己決定的）农曲，但帶來(lái)的后果就是瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條社搅，因?yàn)闉g覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的viewport的寬度要小的。
關(guān)于三個(gè)viewport的理論
-
Visual Viewport
Visual Viewport: 可見(jiàn)視口乳规。就是移動(dòng)設(shè)備上可以被我們看見(jiàn)的部分形葬。寬度在移動(dòng)端通過(guò)
window.innerWidth獲得（僅限移動(dòng)端，PC上哪怕是chrome模擬也會(huì)有不同的結(jié)果）暮的。
-
Layout Viewport
如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話笙以，某些網(wǎng)站就會(huì)因?yàn)関iewport太窄而顯示錯(cuò)亂，所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值冻辩，比如980px猖腕，這樣的話即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。寬度可以通過(guò)
document.documentelement.clientWidth來(lái)獲取恨闪。
-
理想視口/Ideal Viewport
Ideal Viewport：理想視口倘感，其實(shí)就是設(shè)備的可見(jiàn)區(qū)域，和可見(jiàn)視口一致咙咽。
設(shè)置Ideal Viewport的好處是老玛，只要按照Ideal Viewport來(lái)設(shè)計(jì)樣式稿，用戶就能不用左右滑動(dòng)和放大縮小來(lái)查看網(wǎng)站钧敞。
移動(dòng)設(shè)備默認(rèn)的viewport是layout viewport蜡豹，但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開(kāi)發(fā)時(shí)，我們需要的是ideal viewport犁享。
設(shè)置理想視口：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
這段代碼的意思是將布局視口的寬度設(shè)置為設(shè)備寬度余素，初始縮放比例為1，最大縮放比例為1炊昆，用戶不能縮放桨吊。
其中設(shè)置<meta name="viewport" content="width=device-width">和<meta name="viewport" content="initial-scale=1">效果一樣威根，即把當(dāng)前的viewport寬度變成ideal viewport的寬度。
如果width 和 initial-scale=1同時(shí)出現(xiàn)视乐，并且還出現(xiàn)了沖突洛搀，以哪個(gè)為準(zhǔn)呢？比如：
<meta name="viewport" content="width=400, initial-scale=1">
width=400表示把當(dāng)前viewport的寬度設(shè)為400px佑淀，initial-scale=1則表示把當(dāng)前viewport的寬度設(shè)為ideal viewport的寬度留美，那么瀏覽器到底該服從哪個(gè)命令呢？是書(shū)寫(xiě)順序在后面的那個(gè)嗎伸刃？不是谎砾。當(dāng)遇到這種情況時(shí)，瀏覽器會(huì)取它們兩個(gè)中較大的那個(gè)值捧颅。例如景图，當(dāng)width=400，ideal viewport的寬度為320時(shí)碉哑，取的是400挚币；當(dāng)width=400， ideal viewport的寬度為480時(shí)扣典，取的是ideal viewport的寬度妆毕。
解決問(wèn)題
-
圖片高清問(wèn)題
兩倍圖片（@2x），容器縮小50%贮尖；
-
border: 1px問(wèn)題
.scale{
position: relative;
}
.scale:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #ddd;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
}
