移动端web设计尺寸_移动端页面设计规范尺寸、h5页面设计规范尺寸,h5适配
https://www.cnblogs.com/fang51/p/4286481.html
移动端尺寸繁多,包括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任务栏的高度30pxWindows 7任务栏的高度40px
主流浏览器的界面参数
浏览器
状态栏
菜单栏
滚动条
Chrome浏览器
22px(浮动出现)
60px
15px
火狐浏览器
状态栏高度
导航栏高度
标签栏高度
IE浏览器
状态栏高度
导航栏高度
标签栏高度
360浏览器
状态栏高度
导航栏高度
标签栏高度
系统分辨率统计
安全分辨率为1024 × 768 px可建议大分辨率为1280 × 800 px
综合分辨率及浏览器下的统计数据
网页宽度与首屏高度
安全宽度1002 px可建议较大宽度1258 px
Window XP首屏大小580 pxWindow 7 首屏大小710 px
移动端web设计尺寸_移动端页面设计规范尺寸、h5页面设计规范尺寸,h5适配相关推荐
- 移动端web设计尺寸_移动端H5页面的设计稿尺寸(上)
由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行.在设计制作移动端网页的时候,你是否疑惑,这种网站设计稿应该做成的多少屏宽,是否应该跟手机的分辨率一致,还是应该按照iPhone的分辨率来设 ...
- 移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
- 移动端web设计尺寸_移动端页面设计规范尺寸大起底
移动端尺寸繁多,包括IOS和安卓,尺寸多达十余种,所以移动页面尺寸的适配一直是前端和设计的头疼.今天来总结一下当前市场上的一些移动端尺寸,方便设计师和前端去考虑适配.但是最好还是针对自己的产品做调查, ...
- 移动端web设计尺寸_手机移动端网页按钮设计尺寸及间距规范
网页版面上的字体大小有讲究,而网站的按钮的尺寸及按钮之间的间距标准非常有细节规范. 序幕 - 点击,再点击,重复点击!用户是否能够以高触摸精度点击您的移动按钮,又或者他们是错过了按钮的目标?在责怪用户 ...
- js移动端调试控制台_移动端js调试工具:eruda
通常写前端页面都在Chrome浏览器的开发模式下进行调试,但是写放在移动端的H5页面时,有时候会遇到在Chrome上调试没有问题,但是在手机的浏览器上有问题的情况:或者有些功能只能在特定的容器中才能其 ...
- 什么是端到端训练测试_为什么端到端测试对您的团队很重要
什么是端到端训练测试 by Phong Huynh 由Phong Huynh 为什么端到端测试对您的团队很重要 (Why End-to-End Testing is Important for You ...
- bootstrap怎么在移动端横向布局_移动端筛选中的「不限」到底该怎么用
移动端筛选再常见不过了-- 我们在租房时,对于户型.朝向都要要求时会用到多项筛选:我们在找工作时,对薪资和工作经验也会做多项筛选的限制 下图所示的就是比较常见的移动端多项筛选样式: 那么在工 ...
- # 移动端web开发
### 概述 随着互联网技术的快速发展,加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要. 移动端Web主要指运行在移动端(手机.ipad)的we ...
- 移动端 Web 开发
(八)移动端 Web 开发 1. 移动端基础 1.1 浏览器现状 PC端常见浏览器 360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器 UC浏览器 ...
最新文章
- JAVA 多用户商城系统b2b2c-kafka处理超大消息
- 【转】linux之pmap命令!
- Exchange Server2010系列之十四:个人邮件存档
- 如何画功能稳定,美观的PCB?
- 期末考试前的预习,科目:化工设备与反应器(5)
- 零基础学Python(第十四章 字典)
- CSS3 -webkit-animation(动画)
- WPF 如何将IconFont图标转成Geometry
- c++相对路径怎么判断_不可思议!C罗无球跑位分析
- 数学建模 聚类模型
- 成都刘女士的第一场锤子科技发布会 | 现场特写
- MacOSX 下.app支持同时运行多个实例
- Ios精品源码,扁平化的ActionSheet仿花椒截屏demo文件签名重叠卡片滚动汽车仪表盘...
- 在Linux上下载arduino
- 第七章 Scala基础——类继承
- jquery与ajax实现增删改查
- Golang 企业级web后端框架
- 世界杯决赛倒计时,你最看好谁
- Krpano 热点箭头动画
- Oracle卸载教程
热门文章
- 计算机文档为什么被挂起,win7打印文件桌面右下角显示“文档被挂起”的原因及处理方法...
- 计算机辅助翻译取词方式,计算机辅助翻译综述.pdf
- findstr 命令详解
- 数据结构(C语言)图的创建和度数统计(基础)
- 每天一练——牛客网基础语法(7)
- C# MVC的博客开发(一)登录
- 2023-04-20_面试题复盘笔记(253)
- Windows7 SP1 MSDN官方原版多国语言中文包附激活key
- excel中最后几位数值为0处理方法
- 默认的, VC调试器只能正常显示ANSI字符串及UNICOD