手機端網頁設計尺寸大小

對大於30W臺客戶端用戶進行測試，獲得的測試數據以下（數據來源於網絡）：

安全分辨率爲1024 X 768 px 可建議大分辨率爲1280 X 800 px

在Window XP常見分辨率1024×768下咱們除掉任務欄，瀏覽器菜單欄以及狀態欄後剩下的網頁首屏高度平均值是584。

在Window 7常見分辨率1440×900下咱們除掉任務欄，瀏覽器菜單欄以及狀態欄後剩下的網頁首屏高度平均值是716。

於設計來講，選取一個合適的尺寸做爲正常大小和中等屏幕密度（尺寸的選取依據打算適配的硬件，建議參考現主流硬件分辨率），而後向下和向上作小、大、特大和低、高、超高的尺寸與密度。

iPhone手機網頁的設計尺寸

iPhone5尺寸是640x1136px分辨率是326PPI

iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI

iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

安卓網頁的設計尺寸

320dp：一個普通的手機屏幕（240X320，320×480，480X800）

480dp：一箇中間平板電腦像（480×800）

600dp：7寸平板電腦（600×1024）

720dp：10寸平板電腦（720×1280，800×1280）

ipad網頁的設計尺寸

iPad第三代第四代尺寸是2048x1536px分辨率是264PPI

iPad第一代第二代尺寸是1024x768px分辨率是132PPI

iPad Mini尺寸是1024x768px分辨率是163PPI

補充：

響應式經常使用的佈局尺寸

 1 類型      佈局寬度     列寬 間隙寬度
 2  
 3 大屏幕    大於等於1200px70px30px
 4  
 5 默認      大於等於980px 60px20px
 6  
 7 平板      大於等於768px 42px20px
 8  
 9 手機到平板小於等於767px流式列，無固定寬度
10  
11 手機      小於等於480px流式列，無固定寬度
12  
13  
14 /* 大屏幕 */
15  
16 @media (min-width: 1200px) { ... }
17  
18 /* 平板電腦和小屏電腦之間的分辨率 */
19  
20 @media (min-width: 768px) and (max-width: 979px) { ... }
21  
22 /* 橫向放置的手機和豎向放置的平板之間的分辨率 */
23  
24 @media (max-width: 767px) { ... }
25  
26 /* 橫向放置的手機及分辨率更小的設備 */
27  
28 @media (max-width: 480px) { ... }

轉載自高蒙我的博客html