首先明確一點，ppi數值的大小與螢幕（電腦或手機）解析度大小、螢幕（電腦或手機）視口大小沒有任何關係。
ppi全稱是pixalperinch 每平方英吋畫素的個數。
手機的ppi很大，所以螢幕小但是畫素多，所以顆粒感小(視網膜屏)，讓人看不到螢幕上的畫素點。
win10系統有點準備工作。就是先在設定->顯示頁面，把「更改文字、應用等專案的大小」改為100%。並且把顯示解析度設為系統推薦的解析度。並且瀏覽器一定要最大化！
然後我們使用下面這條語句來輸出瀏覽器的視口寬度。
document.documentelement.clientwidth;所以我們得出乙個結論，在電腦中，當瀏覽器最大化時，電腦的視口寬度 = 解析度寬度；也就是說電腦端瀏覽器的視口寬度和電腦本身的解析度相關。。
首先明確一點也是特別重要的一點，那就是
手機瀏覽器的視口大小和手機的解析度沒有任何關係！
手機瀏覽器的視口大小和手機的解析度沒有任何關係！
手機瀏覽器的視口大小和手機的解析度沒有任何關係！。
手機端有兩個視口：
①手機瀏覽器的缺省視口，手機的缺省視口大小永遠是980px，和手機解析度沒有任何關係；
②手機瀏覽器的約束後視口，約束之後的視口寬度，和裝置寬度（手機螢幕的實際寬度）相同，實際上就是人為設定的數字。每個裝置出廠前都會設定一下約束視口之後的寬度。
先來看手機瀏覽器的缺省視口，為什麼是固定的980px呢？
故事是這樣的，有一天喬幫主在想乙個問題，就是自己的蘋果手機如果在市場上火爆了，但是各個**還沒有來得及製作手機專業網頁，那麼使用者不得不用手機訪問電腦版的網頁。如何用小螢幕訪問大螢幕的頁面也同樣可讀呢？喬幫主就想著為手機固定乙個視口寬度，讓手機的視口寬度等於世界上絕大多數pc網頁的版心寬度，就是980px。這樣，用手機訪問電腦版網頁的時候，剛好沒有留白。像從3000公尺高空，俯瞰整個頁面，使用者想看哪個區域，可以用兩個指頭捏合，放大頁面。我們在頁面前加上約束視口的語句。安卓手機也非常尊重喬幫主的決定，都把自己的手機的視口定位980px。
name
="viewport"
content
="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
document.documentelement.clientwidth去列印視口寬度，發現視口寬度的值和螢幕寬度是一樣的。而且不同手機，這個值不同。
原因是約束後視口大小是各個手機生成商根據自己的手機來設定的。
也就是說，因為手機的不同（品牌、型號不同），手機螢幕寬度也就不同，不同手機的約束後視口寬度也就不同！。
既然都不同，那為何還弄個約束後視口出來呢，直接用缺省視口不就行啦？
因為手機螢幕實在太小啦！這麼小的乙個螢幕去完全層遞寬度為980px的網頁，結果必然是網頁上的字變得特別特別小，以至於人根本沒法閱讀。而使用約束後的視口去層遞頁面，比如用340px的約束後視口去層遞980px大小的頁面，雖然會出現水平滾動條，但是頁面中的字大小是非常適合人眼閱讀的。這就是為什麼要使用約束後視口的根本原因。
我們以後講的手機的視口大小都是指這個約束後的視口大小。
ps:約束後的視口大小一般在320~480px這個範圍內。
移動端web開發
viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0 width 設定視口寬度 initial scale 初始化縮放比，大於0的數字 ma...
移動端Web開發
移動端web開發與pc端的web開發有尺寸上的不同，手機螢幕大小有很多種，因此尺寸方面有些要注意的。1.字型 採用js動態設定字型大小的方法 思路如下 螢幕寬度 640px,則font size 100px 螢幕寬度 640px,則font size 100 寬度 640px 字型單位為rem 在b...
移動端web開發
互動優化 1px dpr dpr dp viewport使手機瀏覽器先排版正確再縮放 移動web最佳設定 viewport content width device width,initial scale 1,user scalable no 相容性問題根據html的font size，基值設dev...