移动端web设计尺寸_移动端页面设计规范尺寸大起底
移動端尺寸繁多，包括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等于1.5PX。
于設計來說，選取一個合適的尺寸作為正常大小和中等屏幕密度(尺寸的選取依據打算適配的硬件，建議參考現主流硬件分辨率)，然后向下和向上 做小、大、特大和低、高、超高的尺寸與密度。
典型的設計尺寸
? 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
紅米
4.7英寸
720 × 1280
紅米Note
5.5英寸
720 × 1280
OPPO Find 7
5.5英寸
1440 × 2560
OPPO Find 7 輕裝版
5.5英寸
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
5.5英寸
720 × 1280
HTC One (M8)
5英寸
1080 × 1920
HTC Desire 820
5.5英寸
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
總結
以上是生活随笔為你收集整理的移动端web设计尺寸_移动端页面设计规范尺寸大起底的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 仪表指针样式_PS教程！教你绘制拟物仪表
- 下一篇： 在线地图插件forarcmap_QGIS