我們知道，
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的乙個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此，css中的畫素只是乙個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動裝置上，必須弄明白這點。在早先的移動裝置中，螢幕畫素密度都比較低，如iphone3，它的解析度為320x480，在iphone3上，乙個css畫素確實是等於乙個螢幕物理畫素的。後來隨著技術的發展，移動裝置的螢幕畫素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的retina屏，解析度提高了一倍，變成640x960，但螢幕尺寸卻沒變化，這就意味著同樣大小的螢幕上，畫素卻多了一倍，這時，乙個css畫素是等於兩個物理畫素的。其他品牌的移動裝置也是這個道理。例如安卓裝置根據螢幕畫素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，解析度也是五花八門，安卓裝置上的乙個css畫素相當於多少個螢幕物理畫素，也因裝置的不同而不同，沒有乙個定論。所以說，css中的1px並不等於裝置的1px。
所以在非響應式除錯階段我們寫好了頁面的布局後可能的結果是：
整體是正常的
然而在chrome下（記得一定是chrome debug，firefox debug並不能正常顯示手機端效果）除錯
整個解析度都不對了，
這時解決方案是頭部加入
<版面一切正常metaname="viewport"content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
移動端viewport講解
viewport描述 也就是可視區域。對於桌面瀏覽器，我們都很清楚viewport是什麼，就是除去了所有工具欄 狀態列 滾動條等等之後用於 看網頁的區域，這是真正有效的區域。由於移動裝置螢幕寬度不同於傳統web,因此我們需要改變viewport 這是真正有效的 區域。由於移動裝置螢幕寬度不同於傳統w...
移動端viewport解惑
再配合 查詢 media就可以寫出適配各種手機端的頁面了。但是，為什麼就能夠了呢？網上查了很多資料，反覆看了很多遍還是似懂非，知道看了知乎中乙個問題的解答，茅塞頓開。自己不明白三個點，其中viewport，width，device width分別代表什麼？viewport瀏覽器的視窗，顯示網頁內容的...
梳理 移動端Viewport的知識
再次閱讀了 viewports剖析 寫一點自己對移動端的總結和想法。之前一直在這兩個知識點上學習，但我認為弄懂移動端，還需要加上乙個關鍵知識點，就是 螢幕大小。下面簡單地總結一下。layout viewport 布局視口 在pc端已經知道，網頁的viewport是高於html元素的屬於頁面最高端別的...