手机屏幕适配_第1页
手机屏幕适配_第2页
手机屏幕适配_第3页
手机屏幕适配_第4页
手机屏幕适配_第5页
已阅读5页,还剩4页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、手机屏幕适配随着手机屏幕的不断的增大,同时也遇到一些用户手机屏幕还是处于 240*320这种屏幕的大 小,当然也存着在一些不规则的屏幕分辨率心寸大小。对于很多的UI来说,不同的手机屏幕很多时候得出多套的图才能保证手机客户端在不同的屏幕上实现匹配。针对手机客户端在不同屏幕下的实现进行规划, 并制定出能够计算出具体控件位置的填充区算法,这个是前期对于不同的手机屏幕的匹配做出的一个界面适配算法。首先认清几个手机屏幕区域(先从240*320与320*240说起):1填充区CONTAINER :在该标准中,使用填充区这个概念对界面进行控制,整个页面由不同大小的 填充区组成,不同的填充区有在适应屏幕时,有

2、不同的缩放规则。2、SCREENSCREEN :根填充区,每个分辨率下的可见区域尺寸,其尺寸等于某型号手机的屏幕分辨率。如在n73下,SCREEN的参数为240*320。3、基准屏幕针对横屏和竖屏的屏幕,采用两套不同的基准屏幕,竖基准屏幕240*320和横基准屏320*240, 两种基准屏幕之间可以进行切换。竖屏240*320合适屏幕缩放:竖屏的屏幕缩放基于240*320大小,可以缩放到480*640等屏幕的大小。满足iPhone以及安卓等用户的需要。竖屏的字体比例缩放:控件适配不同屏幕的过程中,控件往往需要根据字体的缩放而进行缩放。遵循的原则一一头尾原则在常规界面的适配过程中,准从先头尾,后

3、中间的原则,即,先确定header的高度,再确定footer的高度,然后根据屏幕高度来和头尾高度确定content填充区的高度,完成整个界面布局的调整。控件宽度以比例缩放原则为主。(常用界面)(Android、iPhone 触屏类型)(诺基亚、Kjava等键盘类型) 缩放原则:界面在适配于不同界面时,主要采用两套不同的缩放规则,不同的填充区根据需要分别采用 字体缩放和比例缩放。整个缩放规则的设计来自图片在不同屏幕间的适应模式,我们假设有个n73手机,屏幕分辨率为240*320,在这部手机上全屏看一张 480*640的图片,手机刚好显示完,显示效果如下(红 框为屏幕可视区域):如果我们用一部 E

4、63的手机(分辨率320*240 )进行查看,不同的查看模式下效果分别是(红框为可视区域):、(高度自适应效果)4(宽度自适应效果)效果中可以看出,采用宽度自适应效果进行缩放的话,配合上、下滚动条可以实现较好的显示效果,同时保证能够清晰查看图片内容。因此,借鉴图片的宽度自适应,将界面当成一张图片来处理,通过不同屏幕分辨率的宽度比作为调整壁纸对界面进行保持比例的缩放。启动界面:240*320-320*240 :LOGOiconareaprograsscopyrightlogoIcon areaprograss1copyright320*240-横屏扩展:常规界面:240*320-320*240 :240*320-竖屏扩展:320*240-横屏扩展:宫格界面,程序会对图标自动排序,头尾遵从常规界面适配原则。5

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论