[发明专利]页面适配方法、装置及电子设备

说明书

技术领域

本发明实施例涉及网页处理技术领域，尤其涉及一种页面适配方法、装置及电子设备。

背景技术

随着移动互联网的发展，越来越多的用户使用手机、平板电脑等移动设备上网，移动设备正在不断地超过桌面设备，成为访问互联网最常用的终端设备。移动设备与个人电脑(personal computer，PC)两类终端的屏幕尺寸差距较大，为保证同一页面在两类设备中的展示效果，现有技术通常需要分别针对上述两种终端设计两种不同版本的页面样式文件(如，层叠样式表(Cascading Style Sheets，CSS)文件)，即适用于PC的第一版本和适用于移动设备的第二版本。

但是，发明人在实现本发明的过程中发现，由于不同移动设备的屏幕尺寸(或屏幕分辨率)是多种多样的，故即使是上述第二版本的样式文件，其在不同移动设备上的展示效果也是不同的，如图1所示的A、B、C三种移动设备对同一页面W的展示效果：移动设备A屏幕过小，使得页面W中各个页面元素尺寸相对过大，导致页面W在A中展示不完整；移动设备C屏幕过大，使得页面W中各个页面元素尺寸相对过小，导致C在展示页面W时空白区域较多；移动设备B的屏幕大小与页面W的设计尺寸完全匹配，可以达到最佳展示效果。依照现有技术，要想保证同一页面在不同移动设备中均具有良好的展示效果，还需要进一步为屏幕大小不同的移动设备设计多种不同的样式文件，即针对屏幕越大的移动设备，其对应的样式文件中页面元素的尺寸也越大。

可见，现有技术为不同屏幕尺寸的设备设计不同的样式文件，虽然可以保证同一页面在不同设备中都具有较好的展示效果，但同时也增加了页面设计工作量，而且在后期页面维护时，也需要同时维护多个样式文件，增加了页面维护工作量。因此，有必要提供一种页面适配方案，以在不增加页面设计及维护工作量的前提下，保证同一页面在不同设备(特别是不同的移动设备中)的展示效果。

发明内容

本发明实施例中提供了一种页面适配方法、装置及电子设备，以在不增加页面设计及维护工作量的前提下，保证同一页面在不同设备(特别是不同的移动设备中)的展示效果。

本发明实施例公开了如下技术方案：

第一方面，本发明实施例提供了一种页面适配方法，

获取所述移动设备的屏幕宽度；

根据所述屏幕宽度计算目标页面的目标字体大小；

获取所述目标页面中各个页面元素的相对样式值；所述相对样式值为所述页面元素的原始值和预设基准值之比；

根据所述目标字体大小和相对样式值渲染所述页面元素。

本发明实施例中，根据基于屏幕宽度的目标字体大小计算方法，以及各个页面元素的相对样式值，可以在任一移动终端请求访问该目标页面时，确定适用于该移动终端的屏幕宽度的目标字体大小及各个页面元素的实际样式值。因此，本发明实施例可以实现根据移动设备的屏幕宽度自适应调整页面的字体大小及页面元素的尺寸，保证页面在不同移动设备上具有相同的展示效果；同时，本发明实施例只需对每个页面预设一个样式文件，其中包含上述基于屏幕宽度的目标字体大小计算方法及各个页面元素的相对样式值，利用这一个样式文件可以确定与任一屏幕宽度相匹配的页面渲染样式，后期也只需维护这一个样式文件，从而大大减少了页面设计及维护的工作量。同时，基于本发明实施例设计的页面样式文件代码简单，执行效率高，可以减少页面加载时间，也可以保证不同屏幕宽度下渲染得到的页面布局结构一致。

可选的，在获取所述移动设备的屏幕宽度之后，以及根据所述屏幕宽度计算目标页面的字体大小之前，所述页面适配方法还包括：

判断所述屏幕宽度是否为预设屏幕宽度；

当所述屏幕宽度为预设屏幕宽度时，获取所述屏幕宽度对应的预设字体大小，并将所述预设字体大小作为所述目标字体大小；

当所述屏幕宽度不是预设屏幕宽度时，执行根据所述屏幕宽度计算目标页面的目标字体大小的步骤。

可选的，获取所述屏幕宽度对应的预设字体大小，包括：利用层叠样式表CSS的媒体查询来获取所述屏幕宽度对应的预设字体大小。

本发明实施例中，对于常见的屏幕宽度(即上述预设屏幕宽度)预先设定最佳字体大小，即上述预设字体大小，并存储该预设屏幕宽度与预设字体大小之间的对应关系，在页面渲染时，先判断当前的移动设备的屏幕宽度是否为上述预设屏幕宽度，如果是则可以直接读取该预设字体大小，作为目标页面的目标字体大小，从而可以省去计算字体大小的时间，提高页面渲染效率。

可选的，在根据所述字体大小和相对样式值加载渲染所述页面元素之后，所述页面适配方法还包括：