全国客服热线:4006-880844

怎么让小程序的界面更适配?

- 编辑:admin -

小程序是一个跨系统的平台,虽然不用区分版本的不同,但是小程序在不同的设备上运行,会出现不同的分辨率,如何使小程序在不同的设备上保持正常的视觉元素,使界面更加的适配,是小程序进行优化时需要考虑的问题。

小程序是一个跨系统的平台,虽然不用区分版本的不同,但是小程序在不同的设备上运行,会出现不同的分辨率,如何使小程序在不同的设备上保持正常的视觉元素,使界面更加的适配,是小程序进行优化时需要考虑的问题。小程序之所以能够在分辨率不同的设备上保证视觉元素的正常显示,是因为rpx(微信小程序中CSS的尺寸单位)的动态尺寸单位的作用。对于很多人来说,都会理解像素:“在显示屏上,每一个画面都是由无数的点阵形成的。这个点阵中,每一个点叫作像素,就是 pixel(缩写为px)”。



但是随着视网膜屏的推出和高分屏的普及,px所能代表的实际长度就会发生改变。单纯地使用pX并不能满足需求,小程序元素很难保证在不同设备上的正常显示。即使是同样的px尺寸的元素,在高分屏上的显示要比低分屏小很多。

在这种情况下,小程序需要的是一个动态的长度单位,这个长度单位还能够对不同的屏幕的分辨率进行调整和适配,以保证所有元素在不同的屏幕上的展示都是一样的。

在微信的官方文档中,有这样的一句话:在 iphone6上,屏幕宽度为375pX,共有750个物理像素,则750mpx=375px=750物理像素,1rpx=0.5px-1物理像素。也就是说,微信小程序的设计师可以把 iphone6的界面作为视觉稿的标准。

小程序设计师在设计小程序的时候,就可以直接利用 iphone6(375X667)的屏幕尺寸作为视觉稿尺寸,然后以1px=2rpx的标准,将设计稿件设定为 750×1334。

当小程序的设计稿交给程序员之前,小程序设计师需要描述好稿尺寸和单位换算标准,从而能够帮助程序员快速实现界面正常的效果。

其实,从小程序的界面适配上也可以看出,微信小程序放到电脑上运行,屏幕的宽度很可能会发生变化,以宽度为基准,最后很容易出现元素显示不全面的情况。
 
另外,微信官方不希望小程序在除了手机以外的设备上运行,因此对于开发者来说,可以把全部的注意力集中在手机上,不需要担心手机屏幕的尺寸大小带来的界面适配问题。

原来的小程序在安卓手机中某些屏幕分辨率下,出现了一些遮挡的漏洞,部分元素的大小也不能符合人的视觉习惯。在进行优化之后,小程序的界面进行了进一步的适配,漏洞被补充,元素的字体大小也得到调整。

虽然说网站建设小程序已经基本适应不同的版本和不同的手机型号,但是从细节上来看,还会出现一些差别,这还是会带给用户一山些不适体验,因此,要对界面进行优化,使小程序能够适配不同的屏幕。

上一篇:APP定制开发/android/ios 下一篇:配置管理