手机屏幕适配原理

网站适配无疑已经成为了传统pc网站快速向wap网站转型的很佳解决方案。网站适配得借助相关的技术才能实现。我们今天来说一下手机屏幕的适配原理，看看重庆网站建设公司创新互联为您带来的分析。

随着手机屏幕的不断的增大，同时也遇到一些用户手机屏幕还是处于240*320这种屏幕的大小，当然也存着在一些不规则的屏幕分辨率心寸大小。对于很多设计人员来说，不同的手机屏幕需要多套图片才能保证手机客户端在不同的屏幕上实现匹配。针对手机客户端在不同屏幕下的实现进行规划，制定出一个能够计算出具体控件位置的填充区算法，这个是前期对于不同的手机屏幕的匹配做出的一个界面适配算法。

首先认清几个手机屏幕区域(先从240*320与320*240说起)：

1.填充区

CONTAINER：在这个标准中，使用填充区概念对界面进行控制，整个页面由大小不一的填充区组成，不同的填充区有在适应屏幕时，有不同的缩放规则。

2.SCREEN

SCREEN：根据填充区，每个分辨率下的可见区域尺寸，其尺寸等于某型号手机的屏幕分辨率。如在n73下，SCREEN的参数为240*320。

3.基准屏幕

针对横屏和竖屏的屏幕，采用两套不同的基准屏幕，竖基准屏幕240*320和横基准屏320*240，两种基准屏幕之间可以进行切换。

竖屏240*320合适屏幕缩放：

竖屏的屏幕缩放基于240*320大小，可以缩放到480*640等屏幕的大小。满足iPhone以及安卓等用户的需要。

竖屏的字体比例缩放：当控件适配不同屏幕时，控件需要根据字体的缩放而进行缩放。

遵循的原则——头尾原则

在常规界面的适配过程中，遵从先头尾，后中间的原则，先确定头部高度，再确定尾部高度，然后根据屏幕高度来和头尾高度确定内容填充区高度，完成整个界面布局的调整。控件宽度以比例缩放原则为主。

缩放原则：

界面在适配于不同界面时，一般采用不同的缩放规则，不同的填充区根据需要分别采用字体缩放和比例缩放。

效果中可以看出，采用宽度自适应效果进行缩放的话，配合上、下滚动条可以实现较好的显示效果，同时保证能够清晰查看图片内容。因此，借鉴图片的宽度自适应，将界面看作是一张图片来处理，通过不同屏幕分辨率的宽度比作为调整壁纸对界面进行保持比例的缩放。

网页名称：手机屏幕适配原理
新闻来源：https://www.cdcxhl.com/news/115131.html

成都网站建设公司_创新互联，为您提供Google、微信小程序、网站设计公司、定制开发、网站建设、网页设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联