智慧型移動裝置由於發展歷史短，但更新速度快，從而導致移動裝置的物理屬性差異巨大，其中一部分物理屬性影響視覺，另一部分影響到互動、相容或效能。對人類來說，至少有80%以上的外界資訊通過視覺獲得，視覺是人和動物最重要的感覺，所以，咱們從視覺開始說起。
看乙個案例：
訪問m.3600.com首頁，首頁焦點圖，在iphone 4下顯示如下，焦點圖兩側沒有空白：
圖1
但在samsung galaxy s4下，焦點圖兩側就有明顯的留白：
圖2
在這個應用場景中，頁面的展示效果由於裝置的物理解析度不同而產生差異。類似這樣的場景非常多，比如將手機橫屏後視覺效果與豎屏狀態的差異等，大多數人都遇見過。
那麼，移動裝置的解析度到底有多複雜呢？請看下面。
從外觀來看，移動裝置相對pc來說非常小巧，這是能帶給使用者的第一視覺感受，而裝置個頭大小對應的其中乙個物理屬性就是裝置物理解析度。移動裝置經過多年發展，已具有了絕對不輸於pc的物理解析度，下面來看一張圖：
圖3（來自網路）
通過圖3可以看出兩點：
1. 移動裝置有很多種物理解析度，早期的移動裝置解析度較低，而現在的移動裝置解析度已經十分高了。即將發布的iphone 6解析度將達到1704960，而現在市面上最高解析度的android裝置已達到25601440，俗稱2k屏；
2. 高寬比也各有不同，早期的移動裝置存在各種奇葩的尺寸比例，但現在的大趨勢是16:9，未來仍有採用一些奇葩尺寸比例的裝置持續存在，比如魅族的15:9。此外，pad尺寸以4:3、16:9和16:10為主；
維基百科中[list of displays by pixel density](詳細的記錄了各類裝置的尺寸和解析度。
更正：維基百科頁面被刪除，原因不明。使用兩個替代方案查詢裝置的尺寸和解析度：
對於前面焦點圖的應用場景，3g.qq.com就給出了乙個很好的解決方案，它能根據螢幕寬度自適應調整焦點圖寬度。但這個案例你可能會有疑惑，明明iphone 4的解析度為960640，s4解析度為19201080，寬度640和1080相差440px，但為何焦點圖側邊的空白只有40px？
要弄明白這點需要理解下面一節的內容裝置畫素比。
裝置畫素比（devicepixelratio）是裝置物理畫素和裝置獨立畫素（device-independent pixels (dips)）的比值。在此，我更喜歡將裝置獨立畫素稱之為裝置顯示畫素，這個名字更方便理解，後面我將通用此名。
在瀏覽器環境中可以使用window.devicepixelratio獲得裝置畫素比。
上面的例子中，iphone 4的裝置畫素比為2，s4的裝置畫素比為3，所以，計算出兩個裝置的裝置顯示畫素分別為480320和640360，這樣，寬度360 - 320正好等於40px。由於焦點圖被設定為固定寬度320px，所以，在s4下就會表現為兩側留有40px的空白。
現在移動裝置的裝置畫素比主要包含：1x、1.5x、2x、2.25x、3x，比如即將發布的iphone 6裝置畫素比將達到3x，而現在世面上號稱1080p和2k螢幕的android手機無一例外都是3x，隨著技術的發展，3x和4x將會是未來的主流。
在真實的移動web應用場景中，裝置畫素比往往也影響著使用者的視覺體驗，比如最典型的背景圖案例，如下：
.icon
@media only screen and (-webkit-min-device-pixel-ratio: 1.5)
}
如果你還想要更多的了解裝置畫素比可以看 @張鑫旭 的文章《裝置畫素比devicepixelratio簡單介紹》。
如果沒有接觸過移動開發的同學，可能還沒有聽說過viewport，但是這個屬性已經成為移動web開發的標配，viewport的宣告標籤在移動web頁面就與一樣，需要預設宣告。
無論如何，需要把它分成兩部分：visual viewport和layout viewport。所以，設定把layout viewport想像成為一張不會變更大小或者形狀的大圖。現在想像你有乙個小一些的框架，你通過它來看這張大圖。（譯者：可以理解為「管中窺豹」）這個小框架的周圍被不透明的材料所環繞，這掩蓋了你所有的視線，只留這張大圖的一部分給你。你通過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮小）來看整個的時候，你可以不用管大圖，或者你可以靠近一些（放大）只看區域性。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠不會變。
@jeremywei 的兩篇譯文，這是我看過對viewport解釋得最詳細和透徹的文章：
我相信很多前端工程師對響應式並不陌生，沒吃過豬肉，還沒見過豬跑麼，對於讀者來說響應式不要太熟悉。前面在裝置畫素比的例子中就已經用到了media queries的特性。
未來，響應式的主要應用場景就是在移動web中。比如3g.qq.com的首頁就是media queries的乙個典型應用場景，使用iphone 5訪問3g.qq首頁時，會有下面這兩種不同的表現形式：
圖4，豎屏狀態
圖5，橫屏狀態
目前響應式主要會應用到3類技術：
在這，我想重點說下向量圖。隨著移動裝置技術的這幾年的高速發展，裝置物理解析度出現乙個極大的跨幅，裝置畫素比也會長期處在1x、2x、3x並存的這樣一種狀態。
在這樣乙個時代背景下，影象從ui設計稿中解構出來，還原到頁面中的實際顯示效果如何實現相容？這個問題將會是對開發者的乙個極大的挑戰。
此時，向量圖技術就顯得非常有用，當前向量圖技術主要包含以下幾種型別：
icon font我最早見於bootstrap 3，後來**也跟進並發布了自己的icon font庫關於技術本身可以參見一淘的這篇文章《icon font 實踐》
對於未來，向量圖技術將是移動web開發中最有潛力的一種技術，它將為ui解構和頁面還原帶來一種新的理解。
字型顯示不是影響視覺的乙個關鍵性問題，但我還是想提到兩句。
由於ios與android使用的系統預設字型不同，所以預設中文字型顯示在系統之間會有差異。還有pc字型與移動裝置也不同，所以，在還原ui稿時，通常也會有差異。如果有必要可以使用@font-face來解決一部分應用場景下的字型問題。
在預設字型顯示的問題上，@元彥 給出了解決方案 字型設定最佳實踐。
這裡僅僅只是說了關於預設字型顯示的問題，字型顯示還有其他更多問題，有興趣的可以參考mobiletech專案。
在實際的專案開發中，前端工程師更多時間都是在做互動、相容相關的工作。從技術上來說，視覺相關的技術也相對簡單，所以，視覺往往會被忽略掉。在移動web開發中，視覺也不是獨立存在，它起著乙個承上啟下的作用，影響到互動、相容和效能的每乙個部分。
Web 應用視覺
before和 after偽類。這些偽類用來在選擇元素之前和之後新增一些內容。before和 after必須配合content來使用。這個屬性通常用來給元素新增內容諸如或者文字。當 before和 after偽類用來新增某些形狀而不是或文字時，content屬性仍然是必需的，但是它的值可以是空字串 ...
移動web開發
1.為什麼去學習移動web？已經從趨勢變成了乙個主流了，網際網路的流量入口已經大於pc端的流量入口2.相容性在國內的移動web瀏覽器，絕大部分都是基於webkit核心的，所以一些css3效果，h5的新特性絕大部分都被支援，需要新增字首。不同機型之間可能會略有不同，這個需要踩坑 在移動端，做動畫一律用...
移動安全入門指南
以前花了將近一年多的時間學習移動安全，期間也遇到了各種坑，特別是學習android加固的知識，由於android加固技術門檻比較高，在網上想要找到系統的資料還是很困難的，一些相關的入門資料也比較少。在這裡，我也把自己以前學習的經歷和遇到的坑做一些總結，希望能給一些剛入門移動安全行業的同學一些參考，避...