不同於pc時代，移動web的樣式更加多樣，也由於手機解析度的碎片化，移動web的相容問題日益突出，下面，我就和各位讀者一起聊聊移動web所面臨的手機解析度問題。
在pc時代，我們書寫css的時候，理所應當的認為，我們所書寫的1px，在螢幕上就是1px的寬度。
但是到了移動端，事情就不是這樣了，我們所書寫的1px，其實到了螢幕上，可能是2px，可能是3px。甚至是你想多少px就多少px。這是為什麼呢？讓我們來說乙個故~事~~~
蘋果發布ios的時候，肯定會想到成千上萬的pc網頁，沒法在自己的ios系統上執行起來時間多麼蛋疼的事情啊。但是呢，這些網頁都是按照pc螢幕的大小寫的呀。
動不動就出現兩個500多px的寬的div並列。這在當時640*960螢幕大小的iphone4上顯示的話，簡直是毀滅性的。(會各種折行，樣式錯亂)，那麼細緻如蘋果肯定不允許這種事情發生。
於是蘋果公司的攻城獅們想出了乙個歪招，那就是告訴瀏覽器，「你在乙個980寬的大螢幕下在渲染呢」，瀏覽器就按照了980寬的方式，渲染出來頁面影象。可是到了瀏覽器這邊，其實是拿到了一張渲染好的、比螢幕大的網頁影象。此時，蘋果再把這張影象，縮放一下，縮為螢幕大小。(我們平時也經常這樣幹，把一張大用雙指放大縮小)
在手機上觀察segmentfault的電腦版，正式這樣的(如圖1.1)
圖1.1
上面所說的瀏覽器就按照了980寬的方式，渲染出來頁面影象。瀏覽器的渲染依據，我們就稱為layout viewport。其實我們可以指定欺騙瀏覽器的寬度是多少。
比如，我們預設的viewport寬度是980px，我們寫了乙個寬度為480的div，顯示在網頁上的時候，是這樣(如圖1.2.1所示)：
圖1.2.1
如果我們書寫viewport標籤，讓其布局的時候，告訴瀏覽器，自己是乙個寬度為480的小螢幕，又會怎樣呢？(如圖1.2.2所示)
圖1.2.2
此時，瀏覽器就真的按照寬度為480的樣子去渲染了。這就是viewport的魅力。這個viewpor的寬度是任我們更改的，究竟更改到多少才算合適呢？
大多數**採取的方式是
width=device-width，就是別忽悠瀏覽器了，像pc上一樣，手機螢幕多寬，瀏覽器就照著多寬去渲染吧。
這是乙個比較好的方案，因為這下子，不會再有什麼縮放問題了。設計就是按照手機去設計，顯示也按照手機去顯示，好看了很多(如圖1.2.3)。
圖1.2.3
時代是在變遷的，iphone也不例外，iphone3的畫素為320480，然而到了iphone4，雖然螢幕不曾變大，但是畫素密度大大增加，變為了640960，總不能把之前設計的網頁都縮小一倍顯示吧？所以蘋果公司的老司機們就又開車了。
iphone4對瀏覽器說，「我的寬度是320px」，其實iphone4是640px。我們按照320px的設計得以渲染，而到了真實的世界中，我們寫的1px的元素，其實是化為2px渲染到使用者面前的。有的同學可能會說，這不是把之前的網頁變大了嗎？
nonono，別忘了，手機的大小並沒有變，只不過是物理世界上的1英吋，上面的畫素點數更多了。以前1px的螢幕畫素點，展現在人眼面前是1/96英吋，畫素密度變為兩倍後，乙個畫素的寬度是1/962英吋。那麼兩個畫素就是21/(96*2)=1/96英吋。物理世界上的寬度又變回來了。
換句話說，雖然畫素變大了，但是10px的在iphone3與iphone4上看起來是一樣大的。
在這裡，我們已經學會了兩個知識點：
1. 320px的邏輯解析度，對於我們來說，無論是iphone3gs還是iphone4，我們都照著320px去寫**就好了，這是我們的邏輯。
2. 320px/640px的物理解析度，對於蘋果手機來說，iphone3gs，他就真的按照320px去顯示，640px的iphone4，它就將我們寫的邏輯解析度乘以2再顯示。這就是為什麼iphone4上面物理解析度是邏輯解析度的兩倍的緣故了。ue給你的圖，你除以2去寫**就好了。
蘋果公司在2023年，推出了新一代的iphone6/iphone6 plus，他們的螢幕都比iphone4要寬、要大。所以，再維持原來的320寬度方法，顯然不行了。所以，蘋果公司按照手機尺寸的比例，上調了解析度：
我們看到上圖，iphone6的寬為750px，iphone4的寬為640px(物理解析度)，比例應該是：750/640
iphone6的邏輯解析度的寬是375px，iphone4的邏輯解析度的寬為320px，比例是：375/320。
750/640 == 375/320，所以，蘋果公司只是把手機普普通通的擴大了一點而已。順便把邏輯解析度也擴大了。並不影響我們的書寫。
這次公升級，最蛋疼的點就是iphone6 plus了，蘋果公司希望更高畫質的螢幕，於是他們再一次施展**，一塊5.5英吋的螢幕上，竟然容得下寬度1080的畫素點數量。
但是，蘋果的老司機們又犯難了，該如何「欺騙瀏覽器」呢？這次是朝著3倍的方向壓縮的。即1個邏輯畫素對應3個物理畫素。但是，事實根本不是這樣，他們只在與iphone4同樣寬度的螢幕上，渲染出2.6個畫素點，iphone4渲染出2個，iphone3gs渲染出1個。
所以，按照我們之前的理論，是不是邏輯畫素就應該是1080/2.6呢。的確是的，1080/2.6~=414px，所以，我們的邏輯解析度就被定格在了414*736。
但是！2.6這個比例太蛋疼了，蘋果是真心想讓我們相信它家的螢幕好呀，於是蘋果公司再一次施展欺騙**，它讓我們認為，他的螢幕是12422208的超級高畫質螢幕。於是，好像是在與iphone3同樣的1px的螢幕尺寸裡面，塞下了3個畫素點。於是我們用1242除以3，還是得到了我們的邏輯解析度：414px。而且，ue(設計師)們出一張1242的，工程師們將其除以3，遠比ue們出一張1080px的，工程師將其除以2.6要爽得多。試想一下，除以2.6好算還是除以3好算？但是，iphone6s plus，實際的渲染是1080px,咋整？縮放唄，於是被瀏覽器渲染好的12422208的影象，被iphone6s plus給縮放成了1080*1920(就好像我們用手指頭縮放過的一樣)
這個3倍還是2倍的比例，前端可以從瀏覽器中獲取：window.devicepixelratio
結論就是，iphone6s plus，我們可以認為，它的物理解析度是邏輯解析度的三倍就好了，ue給你的圖，你除以3去寫**就好了。
幾代iphone手機的解析度如圖4.2.1所示：
圖4.2.1
根據上述，我們的出結論，雖然一樣的邏輯畫素，在iphone6上面和在iphone6 plus上面也是不一致的，因為iphone6 plus會對其渲染後的影象進行縮放。
iphone6下
1px的邏輯畫素 === 2px的真的物理畫素 === 2px *63.5px/326ppi === (1/64)cm
然後是iphone6 plus：（注意，這裡面的ppi使用1080的真實物理尺寸算的）
1px的邏輯畫素 === 3px的，我們以為是3px的物理畫素 === 31080/1242 的真的物理畫素 === 2.6px 63.5px/401ppi ===(2.6/157)cm
這樣看來，在iphone6s plus 和iphone6 plus下，在真實世界的顯示上面，尺寸會比iphone6/iphone5等，大1.15倍左右，經測量（拿尺子量的），的確是有這樣的倍數關係。
蘋果的變遷史我們說完了，是時候說說更亂的安卓了。其實，了解完了蘋果的機制，安卓的也並不難理解，這些零散的安卓裝置，他們也都採用了物理畫素是邏輯畫素n倍的設計方法，當然，這個n是多少，就要看安卓的製造廠商了。總之，我們在安卓上的**，也是按照邏輯畫素渲染的。
聰明的你，知道如何描述什麼是邏輯解析度，什麼是物理解析度了嗎？
NodeJs系列 聊一聊BOM
最近在看node原始碼的時候，偶然間，看到如下函式 remove byte order marker.this catches ef bb bf the utf 8 bom because the buffer to string conversion in fs.readfilesync tran...
LQ系列 雜談 聊一聊演算法
今天由於藍橋杯系統維護，所以停止更新一天 今天想聊聊為什麼學演算法？演算法有什麼用？知乎上看到 作為計算機專業學生最應該學習的課程top5 計算機組成原理 數字邏輯電路 線性代數 概率論 離散數學 演算法 作業系統 編譯原理 掌握一門程式語言和程式設計技術 不知大家怎麼看演算法？曾經我身邊的朋友們說...
聊一聊小甜餅
cookies程式設計 cookie是儲存在客戶端的小文字，儲存的位置分為兩種 cookie可能儲存在客戶端瀏覽器的所佔記憶體中，關閉瀏覽器後，cookies就不再存在。cookie也可能儲存在客戶pc機的硬碟上，設定有效時間，超過有效時間後失效。cookie的常見應用 簡化登入 很多 在登入時，可...