[发明专利]一种页面适配方法及装置

说明书

本发明涉及网络通信领域，尤其涉及一种页面适配方法及装置，该方法为，获取显示界面的宽度；根据显示界面的宽度和预定义的计算方式，计算页面中根元素在显示界面上显示时对应的大小；其中，计算方式为，根据预设的页面对应的原始效果图的宽度、预设的换算关系和显示界面的宽度进行计算；换算关系表示，页面中元素的单位与原始效果图中元素的单位之间的比例换算；根据页面中根元素在显示界面上显示时对应的大小，将页面显示于显示界面上，这样，页面中元素为统一的单位，更为简单，建立简单的换算关系，只需一次开发设计，可以适配所有终端，并页面显示时，能够精确还原原始效果图，降低人力成本，减少了开发周期，同时后期维护也更加简单方便。

技术领域

本发明涉及网络通信领域，尤其涉及一种页面适配方法及装置。

背景技术

实际中，在制作页面时，根据不同的需求，用户会预先绘制设计稿(即原始设计效果图或设计原型)，然后，开发人员可以根据设计稿来制作页面，进而在不同终端的浏览器上加载该页面，即完成在浏览器(即显示界面)上显示该页面，由于页面尺寸是固定的，对于不同尺寸的移动终端的浏览器在适配上就会存在一些问题。

并且，随着移动终端的日益普及，例如，手机、平板电脑种类也非常多，与传统PC端显示器不同的是，移动终端的分辨率没有统一的标准，各种尺寸、各种屏幕分辨率的移动终端非常多，这样，在不同移动终端的浏览器上显示页面时，传统PC端固定宽度的页面布局方法不再适用，需要一种简单高效的页面适配方法来满足不同分辨率的移动终端。

为了使页面在不同分辨率的移动终端上能够正常显示，给用户舒适的使用体验，现有技术中，页面适配方法大致可分为：响应式布局、viewport缩放、百分比布局等。

(1)响应式布局

建立媒体查询，在制作页面时，编写多套层叠样式表单(Cascading Style Sheet，CSS)样式，针对不同的移动终端的屏幕分辨率设置不同的样式。若新设置浏览器大小，页面也会根据浏览器的宽度和高度重新渲染页面。

(2)窗口(viewport)缩放

通过动态设置页面meta标签的scale值，整体缩放页面的尺寸，使页面能恰好适应屏幕宽度。但此方案在某些移动终端上显示会有异常，部分图片会由于移动终端的原因变模糊，在日常开发中使用较少。

(3)百分比布局

将页面宽度均匀分成100份，页面中每个容器或元素用百分比来定义宽度。在CSS样式表中，使用百分比作为单位，这样页面中的容器和元素均可以按照固定的比例进行显示，能较好的适应不同的移动终端上浏览器的宽度。若仅需对页面大致进行水平方向的区域划分，该方案能够较好的满足需求。

虽然现有技术中上述几种页面适配方法可以满足一定的需求，但是，也都存在不同的劣势和缺陷，尤其是在要求对页面进行精确还原的场景下，上述几种方法均不能很好地满足需求，具体为：

(1)响应式布局。该方法工作量较大，可能是其他页面适配方法的数倍，开发周期长，效率较低，并且难于维护，并且，若要做到精准适配，则需要编写多套样式。

(2)viewport缩放。在部分移动终端上显示异常，一般较少使用。

(3)百分比布局。无法根据不同移动终端上浏览器的宽度精确定义在显示时页面中各个容器或元素的宽度，造成最后在浏览器上显示的页面与原始的设计稿不符，极端情况下，显示的页面中元素会重叠在一起，造成页面混乱。

由此可见，现有技术中，页面适配方法实现比较复杂并且无法做到在不同移动终端的显示界面上精确还原设计稿的效果。

发明内容

本发明实施例提供一种页面适配方法及装置，以更加简单、高效并能精确还原设计原型，来实现在不同移动终端上的页面适配。