statusbar 尺寸 显示图标_移动端页面设计规范尺寸大起底 - 椰树飘香
移動端尺寸繁多,包括IOS和安卓,尺寸多達十余種,所以移動頁面尺寸的適配一直是前端和設計的頭疼。今天來總結一下當前市場上的一些移動端尺寸,方便設計師和前端去考慮適配。但是最好還是針對自己的產品做調查,根據數據去做主流適配。
Iphone&Ipad&Android&WEB全部規范全在這兒了!!
①iPhone的設計尺寸
iPhone界面尺寸:
| 設備 | 分辨率 | 狀態欄高度 | 導航欄高度 | 標簽欄(工具欄)高度 |
| iPhone6 plus設計版 | 1242 × 2208 | 60px | 132px | 146px |
| iOS APP設計一稿支持iPhone5/iPhone6/Plus設計流程 | ||||
| iPhone6 plus物理版 | 1080 × 1920 | 54px | 132px | 146px |
| iOS APP設計一稿支持iPhone5/iPhone6/Plus設計流程 | ||||
| iPhone6 | 750 × 1334 | 40px | 88px | 98px(88px) |
| iPhone5s | 640 × 1136 | 40px | 88px | 98px(88px) |
| iPhone5c | 640 × 1136 | 40px | 88px | 98px(88px) |
| iPhone5 | 640 × 1136 | 40px | 88px | 98px(88px) |
| iPhone4s | 640 × 960 | 40px | 88px | 98px(88px) |
| iPhone4 | 640 × 960 | 40px | 88px | 98px(88px) |
iPhone圖標尺寸:
| 系統 | 分辨率 | 圓角大小 |
| iOS 6- | 90px - 1024px | 約為圖標寬度 × 0.175 |
| iOS 7+ | 90px - 1024px | 約為圖標寬度 × 0.225 |
| Asset | iPhone 6 Plus (@3x) | iPhone 6 and iPhone 5 (@2x) | iPhone 4s (@2x) | iPad and iPad mini (@2x) | iPad 2 and iPad mini (@1x) |
| App icon (required for all apps) | 180 × 180 | 120 × 120 | 120 × 120 | 152 × 152 | 76 × 76 |
| App icon for the App Store (required for all apps) | 1024 × 1024 | 1024 × 1024 | 1024 × 1024 | 1024 × 1024 | 1024 × 1024 |
| Launch file or image (required for all apps) | Use a launch file (see Launch Images) | For iPhone 6, use a launch file (see Launch Images) For iPhone 5, 640 × 1136 | 640 × 960 | 1536 × 2048 (portrait) 2048 × 1536 (landscape) | 768 × 1024 (portrait) 1024 × 768 (landscape) |
| Spotlight search results icon (recommended) | 120 × 120 | 80 × 80 | 80 × 80 | 80 × 80 | 40 × 40 |
| Settings icon (recommended) | 87 × 87 | 58 × 58 | 58 × 58 | 58 × 58 | 29 × 29 |
| Toolbar and navigation bar icon (optional) | About 66 × 66 | About 44 × 44 | About 44 × 44 | About 44 × 44 | About 22 × 22 |
| Tab bar icon (optional) | About 75 × 75 (maximum: 144 × 96) | About 50 × 50 (maximum: 96 × 64) | About 50 × 50 (maximum: 96 × 64) | About 50 × 50 (maximum: 96 × 64) | About 25 × 25 (maximum: 48 × 32) |
| Default Newsstand cover icon for the App Store (required for Newsstand apps) | At least 1024 pixels on the longest edge | At least 1024 pixels on the longest edge | At least 1024 pixels on the longest edge | At least 1024 pixels on the longest edge | At least 512 pixels on the longest edge |
| Web clip icon (recommended for web apps and websites) | 180 × 180 | 120 × 120 | 120 × 120 | 152 × 152 | 76 × 76 |
②iPad的設計尺寸
iPad界面尺寸:
| 設備 | 分辨率 | 狀態欄高度 | 導航欄高度 | 標簽欄高度 |
| iPad6/iPad Air2 | 2048 × 1536 | 40px | 88px | 98px |
| iPad5/iPad Air/ipad mini 2 | 2048 × 1536 | 40px | 88px | 98px |
| iPad4/ipad mini | 2048 × 1536 | 40px | 88px | 98px |
| iPad3/the new iPad | 2048 × 1536 | 40px | 88px | 98px |
| iPad2 | 1024 × 768 | 20px | 44px | 49px |
| iPad1 | 1024 × 768 | 20px | 44px | 49px |
| iPad Mini | 1024 × 768 | 20px | 44px | 49px |
iPad圖標尺寸:
| 系統 | 分辨率 | 圓角大小 |
| iOS 6- | 90px - 1024px | 約為圖標寬度 × 0.175 |
| iOS 7+ | 90px - 1024px | 約為圖標寬度 × 0.225 |
| Asset | iPhone 6 Plus (@3x) | iPhone 6 and iPhone 5 (@2x) | iPhone 4s (@2x) | iPad and iPad mini (@2x) | iPad 2 and iPad mini (@1x) |
| App icon (required for all apps) | 180 × 180 | 120 × 120 | 120 × 120 | 152 × 152 | 76 × 76 |
| App icon for the App Store (required for all apps) | 1024 × 1024 | 1024 × 1024 | 1024 × 1024 | 1024 × 1024 | 1024 × 1024 |
| Launch file or image (required for all apps) | Use a launch file (see Launch Images) | For iPhone 6, use a launch file (see Launch Images) For iPhone 5, 640 × 1136 | 640 × 960 | 1536 × 2048 (portrait) 2048 × 1536 (landscape) | 768 × 1024 (portrait) 1024 × 768 (landscape) |
| Spotlight search results icon (recommended) | 120 × 120 | 80 × 80 | 80 × 80 | 80 × 80 | 40 × 40 |
| Settings icon (recommended) | 87 × 87 | 58 × 58 | 58 × 58 | 58 × 58 | 29 × 29 |
| Toolbar and navigation bar icon (optional) | About 66 × 66 | About 44 × 44 | About 44 × 44 | About 44 × 44 | About 22 × 22 |
| Tab bar icon (optional) | About 75 × 75 (maximum: 144 × 96) | About 50 × 50 (maximum: 96 × 64) | About 50 × 50 (maximum: 96 × 64) | About 50 × 50 (maximum: 96 × 64) | About 25 × 25 (maximum: 48 × 32) |
| Default Newsstand cover icon for the App Store (required for Newsstand apps) | At least 1024 pixels on the longest edge | At least 1024 pixels on the longest edge | At least 1024 pixels on the longest edge | At least 1024 pixels on the longest edge | At least 512 pixels on the longest edge |
| Web clip icon (recommended for web apps and websites) | 180 × 180 | 120 × 120 | 120 × 120 | 152 × 152 | 76 × 76 |
③Android的設計尺寸
屏幕尺寸
指實際的物理尺寸,為屏幕對角線的測量。
為了簡單起見,Android把實際屏幕尺寸分為四個廣義的大小:小,正常,大,特大。
像素(PX)
代表屏幕上一個物理的像素點代表屏幕上一個物理的像素點。
屏幕密度
為解決Android設備碎片化,引入一個概念DP,也就是密度。指在一定尺寸的物理屏幕上顯示像素的數量,通常指分辨率。 為了簡單起見,Android把屏幕密度分為了四個廣義的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi) 像素= DP * ( DPI / 160 ) 例如,在一個240dpi的屏幕里,1DP等于。
于設計來說,選取一個合適的尺寸作為正常大小和中等屏幕密度(尺寸的選取依據打算適配的硬件,建議參考現主流硬件分辨率),然后向下和向上 做小、大、特大和低、高、超高的尺寸與密度。
典型的設計尺寸
? 320dp:一個普通的手機屏幕(240X320,320×480,480X800)
? 480dp:一個中間平板電腦像(480×800)
? 600dp:7寸平板電腦(600x1024)
? 720dp:10寸平板電腦(720x1280,800x1280)
Android安卓系統dp/sp/px換算表
| 名稱 | 分辨率 | 比率 rate (針對320px) | 比率 rate (針對640px) | 比率 rate (針對750px) |
| idpi | 240 × 320 | 0.75 | 0.375 | 0.32 |
| mdpi | 320 × 480 | 1 | 0.5 | 0.4267 |
| hdpi | 480 × 800 | 1.5 | 0.75 | 0.64 |
| xhdpi | 720 × 1280 | 2.25 | 1.125 | 1.042 |
| xxhdpi | 1080 × 1920 | 3.375 | 1.6875 | 1.5 |
主流Android手機分辨率和尺寸
| 設備 | 分辨率 | 尺寸 | 設備 | 分辨率 | 尺寸 |
| 三星Galaxy S3 | 4.8英寸 | 720 × 1280 | 三星Galaxy S4 | 5英寸 | 1080 × 1920 |
| 三星Galaxy S5 | 5.1英寸 | 1080 × 1920 | 三星Galaxy S6 | 4.5英寸 | 1200 × 1920 |
| 小米1 | 4英寸 | 480 × 854 | 小米1s | 4英寸 | 480 × 854 |
| 小米2 | 4.3英寸 | 720 × 1280 | 小米2s | 4.3英寸 | 720 × 1280 |
| 小米3 | 5英寸 | 1080 × 1920 | 小米3s(概念) | 5英寸 | 1080 × 1920 |
| 小米4 | 5英寸 | 1080 × 1920 | 紅米 | 英寸 | 720 × 1280 |
| 紅米Note | 英寸 | 720 × 1280 | ? | ? | ? |
| OPPO Find 7 | 英寸 | 1440 × 2560 | OPPO Find 7 輕裝版 | 英寸 | 1080 × 1920 |
| OPPO N1 mini | 5英寸 | 720 × 1280 | OPPO R3 | 5英寸 | 720 × 1280 |
| OPPO R1S | 5英寸 | 720 × 1280 | ? | ? | ? |
| 錘子 Smartisan T1 | 4.95英寸 | 1080 × 1920 | ? | ? | ? |
| 華為 Ascend P7 | 5英寸 | 1080 × 1920 | 華為 Ascend Mate7 | 6英寸 | 1080 × 1920 |
| 華為 榮耀6 | 5英寸 | 1080 × 1920 | 華為 Ascend Mate2 | 6.1英寸 | 720 × 1280 |
| 華為 C199 | 英寸 | 720 × 1280 | ? | ? | ? |
| HTC One (M8) | 5英寸 | 1080 × 1920 | HTC Desire 820 | 英寸 | 720 × 1280 |
| 魅族 MEIZU MX4 | 5.36英寸 | 1152 × 1920 | 魅族 MEIZU MX3 | 5.1英寸 | 1080 × 1800 |
④Web的設計尺寸
Windows XP任務欄的高度30px??Windows 7任務欄的高度40px
主流瀏覽器的界面參數
| 瀏覽器 | 狀態欄 | 菜單欄 | 滾動條 |
| Chrome瀏覽器 | 22px(浮動出現) | 60px | 15px |
| 火狐瀏覽器 | 狀態欄高度 | 導航欄高度 | 標簽欄高度 |
| IE瀏覽器 | 狀態欄高度 | 導航欄高度 | 標簽欄高度 |
| 360瀏覽器 | 狀態欄高度 | 導航欄高度 | 標簽欄高度 |
系統分辨率統計
安全分辨率為1024 × 768 px??可建議大分辨率為1280 × 800 px
綜合分辨率及瀏覽器下的統計數據
網頁寬度與首屏高度
安全寬度1002 px??可建議較大寬度1258 px
Window XP首屏大小580 px??Window 7 首屏大小710 px
本文由?w3cmark_前端筆記?版權所有,轉載時請注明出處。注明出處格式:w3cmark ()
總結
以上是生活随笔為你收集整理的statusbar 尺寸 显示图标_移动端页面设计规范尺寸大起底 - 椰树飘香的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: UEditor .Net版本任意文件上传
- 下一篇: 让Android 设备通过USB 转RJ