一、viewport

PC上的網(wǎng)頁寬度一般最小都是1024像素,但是手機(jī)屏幕寬度沒這么大，瀏覽器可視區(qū)域的尺寸最大也不超過手機(jī)屏幕寬度，如果直接顯示PC版的網(wǎng)頁的話，會(huì)擠作一團(tuán)，排版什么的都會(huì)亂掉，怎么辦呢？弄一個(gè)虛擬的網(wǎng)頁顯示視窗(viewport)，這個(gè)視窗比瀏覽器可視區(qū)域大就可以把PC上的網(wǎng)頁顯示在手機(jī)屏幕上了（移動(dòng)設(shè)備上的瀏覽器會(huì)把自己的viewport設(shè)為980或1024），這就是viewport中的第一個(gè)概念，layout-viewport。

二、css中的px問題
px是一個(gè)抽象相對的像素單位，是指一個(gè)邏輯像素，在pc上1個(gè)邏輯像素就等于1個(gè)物理像素，但在移動(dòng)端邏輯像素和物理像素并不相等，為什么呢？
移動(dòng)端的屏幕尺寸非常小，如果1個(gè)物理像素等于1個(gè)邏輯像素的話，顯示出來的文字和圖片之類的清晰度不夠高不夠細(xì)膩，怎么辦呢？把物理像素提高，即在1個(gè)邏輯像素由更多的物理像素。

三、移動(dòng)端圖片模糊的原因

位圖像素是柵格圖像（如：png,jpg,gif等）最小的數(shù)據(jù)單元。每一個(gè)位圖像素都包含著一些自身的顯示信息。（如：顯示位置，顏色值，透明度等）

理論上來說，1個(gè)位圖像素對應(yīng)1個(gè)物理像素，圖片才能達(dá)到清晰的展示。

四、高清屏下html中1px的邊框比視覺圖中的粗

設(shè)計(jì)師在視覺標(biāo)注圖上標(biāo)明邊框?yàn)?像素，于是你在css中很愉快的寫下border:1px，結(jié)果悲劇了，在iphone6這種高清屏中看起來1px比較粗。

原因還是上面第2點(diǎn)的知識，1px不等于1個(gè)物理像素，在iphone6中1px等于2個(gè)物理像素，看著就會(huì)比視覺稿上的粗。

五、視覺稿如何還原？

為了適配高清屏，UI一般會(huì)以Iphone6的物理分辨率來設(shè)計(jì)視覺稿，即視覺圖的寬度為750px，為什么會(huì)選iphone6呢？因?yàn)閕phone6的尺寸在手機(jī)屏幕尺寸中算是一個(gè)中間值。

還原視覺稿時(shí)，簡單粗暴的做法是直接將標(biāo)注的尺寸除以2來確定寬高（除以2是因?yàn)閕phone6的dpr為2,750個(gè)物理像素的寬度，在iphone6上只需要375個(gè)獨(dú)立像素就能鋪滿了），這么做在屏幕尺寸更大的手機(jī)上，兩邊就會(huì)留白，而在更小尺寸的屏幕上最會(huì)顯示不全。

轉(zhuǎn)載請注明：?蝸牛SEO? ? 移動(dòng)網(wǎng)站開發(fā)中的一些概念