# 網頁顯示大小的變化，從PC到Mobile-第一部分 > 原作者：melon 原文地址：http://melonh.com/css/2014/03/27/the-size-of-page-from-pc-to-mobile.html 手機、pad等移動設備已成為生活中必不可缺少一部分。與傳統PC相比，這類設備的尺寸小很多, 分辨率也有略微差別。 那么網頁中一個寬度為100px的按鈕，在手機上顯示，與在PC上顯示，視覺上相差多少呢？ 網頁大小的變化要從兩個方面來分析： 1. 屏幕參數dpi, dip 2. 網頁縮放 這篇文章先在網頁縮放比例為100%的基礎上解釋屏幕參數對網頁顯示大小的影響。 該文章的第二部分（未出）將會解釋網頁縮放原理，敬請期待。咯咯咯~~ ## 理解屏幕參數 1. 屏幕尺寸 意義：用戶屏幕的整體大小。數值為屏幕對角線長度。 eg: iphone5 4inch，是指iphone5對角線的長度為4inc 2. 分辨率(Resolution) 意義：用戶屏幕有多少個物理像素（可以發光的點）。 eg. 1980*1080分辨率，代表水平方向有1980個像素長度，垂直方向有1080個像素長度。 3. dpi(dots per inch)/ppi(pixel per inch) 意義：每英寸有多少個像素點。即屏幕像素密度。 ## 移動設備屏幕參數帶來得問題 以iphone5和iMac為例： | 手機\參數|尺寸（英寸）|分辨率| 屏幕密度dpi| | ---- | ---- | ---- | ---- | |iphone5 |4 | 1136 * 640|326| |iMac |21.5| 1980 * 1080| 102| iphone5的屏幕密度dpi比iMac的要高三倍左右，換過來說，1px在iphone5上顯示的寬度要是iMac上的1/3左右。 于是帶來了一個問題，**同樣像素寬度的元素，在手機上看起來比PC上小很多**。16px的字體，在手機上看好像pc上的5px，難以閱讀！ ## dip—不依賴設備的長度單位 為了解決上面的問題，Android提出了dip（device independent pixel)的概念，IOS上也有類似的概念。 dip(device independent pixel), 也叫dp 意義：一個長度單位。1dp約等于1/160英寸。1dp代表的長度由屏幕廠商根據具體情況設定。 通常Android開發者設置元素大小時不使用px作為單位。而是使用dp(即dip)作為單位。那么在不同設備上，顯示的大小都會差不多。 ### devicePixelRatio devicePixelRatio = 1dp的寬度 / 1px的寬度。 意義：它的值帶表1dp長度單位內有多少個物理像素。 對于iPhone來說，非視網膜設備的devicePixelRatio為1，視網膜設備為2。 對Android來說，它們的devicePixelRatio從0.75 - 2不等。見下表。 ### dip長度的設定（我自己的理解） 1dp代表的長度，是由屏幕廠商根據屏幕參數決定的。iphone5的一個物理像素的寬度約為pc上的1/3，因此一個大小為12px的字體在iphone5上看比PC上只有三分之一的大小，這樣必須看不見！因此Android開發者都會使用dp作為單位，我們希望12dp的字體在手機上能看的清，如果12dp的長度有24個物理像素，那字體應該看起來約為pc上的2/3。恩，這樣可以接受，很好，那就1dp長度內有2個px吧，于是devicePixelRatio等于2。 1dp的長度在各個設備下略有不同，但都約為1/160英寸，因此16dp的長度在各個屏幕下看大小略微不同，但也差不多。 ## 移動端瀏覽器的秘密優化-單位轉換 在進行Web開發時，我們通常還是使用百分比，或者px作為單位。但是移動端瀏覽器在渲染時，會根據devicePixelRatio轉換長度。如iphone5的devicePixelRatio為2，網頁中得一個字體為12px，那么在手機上渲染時，瀏覽器會重新計算這個字體的大小為2*12=24px。因此在字體看起來差不多大。 ### iphone5 vs iMac，實例分析 iphone5的dpi為326, iMac的dpi為102, 因此iphone5上16px的大小為iMac上的102/326 * 16 ~= 4.8，16px的字體如果不進行單位轉換，在iphone5上看，好像iMac上的4.8px大。iphone5的devicePixelRatio為2，移動端瀏覽器渲染時，將16px的單位轉為16dp，因此在iphone上看起來，好像是iMac上的4.8 * 2 ~= 10px。