手機端網頁設計尺寸大小

標籤：平板   pad   pre   text   個人   com   lis   mini   ges   

手機端網頁設計尺寸大小

 

 

 對大於30W台用戶端使用者進行測試，得到的測試資料如下（資料來源於網路）： 安全解析度為1024 X 768 px 可建議大解析度為1280 X 800 px  在Window XP常見解析度1024×768下我們除掉工作列，瀏覽器功能表列以及狀態列後剩下的網頁首屏高度平均值是584。在Window 7常見解析度1440×900下我們除掉工作列，瀏覽器功能表列以及狀態列後剩下的網頁首屏高度平均值是716。 於設計來說，選取一個合適的尺寸作為正常大小和中等螢幕密度（尺寸的選取依據打算適配的硬體，建議參考現主流硬體解析度），然後向下和向上 做小、大、特大和低、高、超高的尺寸與密度。 iPhone手機網頁的設計尺寸 iPhone5尺寸是640x1136px解析度是326PPIiPhone4和iPhone4S尺寸是640x960px解析度是326PPIiPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI  安卓網頁的設計尺寸 320dp：一個普通的手機螢幕（240X320，320×480，480X800）480dp：一個中間平板電腦像（480×800）600dp：7寸平板電腦（600×1024）720dp：10寸平板電腦（720×1280，800×1280） ipad網頁的設計尺寸 iPad第三代第四代尺寸是2048x1536px解析度是264PPIiPad第一代第二代尺寸是1024x768px解析度是132PPIiPad 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) { ... }

 

 

轉載自 高蒙個人部落格

 

手機端網頁設計尺寸大小