CN106776969A - 页面适配方法、装置及电子设备 - Google Patents

Abstract

本发明实施例提供一种页面适配方法、装置及电子设备，根据基于屏幕宽度的目标字体大小计算方法，以及各个页面元素的相对样式值，可以在任一移动终端请求访问该目标页面时，确定适用于该移动终端的屏幕宽度的目标字体大小及各个页面元素的实际样式值。本发明实施例可以根据移动设备的屏幕宽度自适应调整页面的字体大小及页面元素的尺寸；同时，本发明实施例只需对每个页面设计一个包含上述基于屏幕宽度的目标字体大小计算方法及各个页面元素的相对样式值的样式文件，就可以确定与任一屏幕宽度相匹配的实际渲染样式，既可以减少页面设计与维护的工作量，还可以简化样式代码，提高执行效率，减少页面加载时间，并保证页面布局结构的一致性。

Description

页面适配方法、装置及电子设备

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

当检测到所述移动设备发生屏幕翻转时，重新执行所述获取所述移动设备的屏幕宽度。

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

根据预设间隔时间循环执行获取所述移动设备的屏幕宽度的步骤；

当本次获取到的屏幕宽度与前一次获取到的屏幕宽度不同时，根据本次获取到的屏幕宽度重新计算所述目标字体大小。

本发明实施例中，在页面渲染完成后，还检测屏幕宽度是否发生变化，并在检测到屏幕宽度变化后，重新确定目标字体大小，并根据重新确定的目标字体大小及各个页面元素的相对样式值，重新对目标页面进行渲染，从而实现目标页面渲染过程中对在任意移动设备的任意屏幕方向的自动实时适配，始终保证目标页面的布局结构一致性，避免用户视觉混淆，提高用户体验。

第二方面，本发明实施例提供了一种页面适配装置，包括：

屏幕宽度获取单元，用于获取所述移动设备的屏幕宽度；

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

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

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

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

可选的，所述装置还包括：

预设宽度判断单元，用于判断所述屏幕宽度获取单元获取到的所述屏幕宽度是否为预设屏幕宽度；并在所述屏幕宽度为预设屏幕宽度时，触发字体大小查询单元，以及，在所述屏幕宽度不是预设屏幕宽度时，触发所述字体大小计算单元；

所述字体大小查询单元，用于获取所述屏幕宽度对应的预设字体大小，并将所述预设字体大小作为所述目标字体大小。

可选的，所述字体大小查询单元，具体被配置为：

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

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

可选的，所述装置还包括：屏幕翻转检测单元，用于在检测到所述移动设备发生屏幕翻转时，触发所述屏幕宽度获取单元重新获取所述移动设备的屏幕宽度。

可选的，所述装置还包括：循环控制单元，用于根据预设间隔时间控制所述屏幕获取单元循环执行获取所述移动设备的屏幕宽度的步骤，并在本次获取到的屏幕宽度与前一次获取到的屏幕宽度不同时，将根据本次获取到的屏幕宽度发送至所述字体大小计算单元。

由以上结构可知，本发明实施例在页面渲染完成后，还检测屏幕宽度是否发生变化，并在检测到屏幕宽度变化后，重新确定目标字体大小，并根据重新确定的目标字体大小及各个页面元素的相对样式值，重新对目标页面进行渲染，从而实现目标页面渲染过程中对在任意移动设备的任意屏幕方向的自动实时适配，始终保证目标页面的布局结构一致性，避免用户视觉混淆，提高用户体验。

第三方面，本发明实施例提供了一种电子设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述一个处理器执行的指令，所述指令被被所述至少一个处理器执行，以使所述至少一个处理器能够：

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

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

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

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

第四方面，本发明实施例还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行上述第一方面任意一个实施例提供的所述页面适配方法。

第五方面，本发明实施例还提供了一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使所述计算机执行上述第一方面任意一个实施例提供的所述页面适配方法。

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

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为不同尺寸的移动设备访问同一页面时该页面的展示效果示意图；

图2为本发明实施例提供的一种页面适配方法的流程图；

图3为基于本发明实施例提供的页面适配方法得到的一种屏幕宽度下页面展示效果示意图；

图4为基于本发明实施例提供的页面适配方法得到图3所示页面在另一种屏幕宽度下的展示效果示意图；

图5为本发明实施例提供的另一种页面适配方法的流程图；

图6为本发明实施例提供的又一种页面适配方法的流程图；

图7为本发明实施例提供的一种页面适配装置的结构示意图；

图8为本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

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

图2为本发明实施例提供的一种页面适配方法的流程图。该方法可以应用于手机、平板电脑等多尺寸移动终端中浏览器网页加载、应用程序内页面加载等场景。

参照图2，本发明实施例提供的页面适配方法至少包括以下步骤：

S11、获取所述移动设备的屏幕宽度。

可选的，在第一种可行的实施例中，上述屏幕宽度可以为所述移动设备屏幕的物理尺寸值；在第二种可行的实施例中，上述屏幕宽度也可以为所述移动设备的屏幕在宽度方向上的分辨率值；在第三种可行的实施例中，上述屏幕宽度还可以为所述移动设备屏幕上用于展示目标页面的区域在宽度方向上的分辨率值。下文以clientWidth表示所述屏幕宽度。

上述第三种可行的实施例，适用于仅将移动设备屏幕的一部分用于展示目标页面，例如，移动设备处于分屏模式时，仅屏幕的上半部分用于展示目标页面，下半部分用于显示其他应用程序界面。

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

可选的，本发明实施例可以将所述屏幕宽度clientWidth除以一预设换算值f，将得到的商值作为目标字体大小fontSize，以计算公式表示为：fontSize＝clientWidth/f。其中，预设换算值f可以在页面设计阶段根据页面展示需求确定。将上述计算公式以可执行代码的形式记录于目标页面的CSS文件中，即可在执行页面渲染之前，通过调用CSS文件中的该可执行代码，计算得到该目标页面的目标字体大小。

例如，某一页面的CSS文件中设定f＝10，则当获取到的屏幕宽度clientWidth＝720px时，则可以根据上述公式计算得到目标字体大小fontSize＝720/10＝72px；当获取到的屏幕宽度clientWidth＝360px时，则可以计算得到目标字体大小fontSize＝360/10＝36px。可见，基于本发明实施例，屏幕宽度越大，最终确定的目标字体大小越大，从而实现根据移动设备的屏幕宽度自适应调整目标字体大小。

本发明实施例中，通过步骤S12计算得到的目标字体大小为页面根元素(即CSS文件中的html元素)的字体大小，其他子元素的字体大小均可根据该根元素的字体大小确定。

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

区别于现有技术中在CSS文件中直接以具体的像素值或百分比来定义页面中每个页面元素的样式值，本发明实施例中在CSS文件中记录的是各个页面元素的相对样式值；该相对样式值为相应页面元素的原始值和预设基准值之比。本发明实施例中，预设基准值和相对样式值的单位均可以采用相对单位rem，即相对于页面根元素的长度单位。

可选的，所述预设基准值可以根据页面的原始设计图中某一元素的某一属性的原始值确定；例如，可以根据页面中主图片的宽度原始值确定该预设基准值。

假设某一页面中主图片的宽度原始值为1000px，则在一种可行的具体实施方式中，可以直接将该宽度原始值作为预设基准值，即base＝1000rem；在另一种可行的具体实施方式中，也可以在该宽度原始值的基础上除以一自定义变量，得到的计算结果作为上述预设基准值，假设根据页面展示需求，该自定义变量取值为10，则base＝1000/10＝100rem。

基于上述预设基准值，假设在某一页面的原始设计图中，页面元素e2的宽度Width的原始值为100px，高度Height的原始值为50px，左边距Margin-left(e2的左边缘距页面左边缘的距离)的原始值为30px，右边距Margin-right(e2的右边缘距页面右边缘的距离)的原始值为30px预设基准值记为base＝100；则在该页面的CSS文件中有如下定义：

页面元素e2的宽度样式值为Width＝100/base＝100/100＝1rem；

页面元素e2的高度样式值为Height＝50/base＝50/100＝0.5rem；

页面元素e2的左边距样式值为Margin-left＝30/base＝30/100＝0.3rem；

页面元素e2的右边距样式值为Margin-right＝30/base＝30/100＝0.3rem。

可见，本发明实施例所述的预设基准值相当于确定各个页面元素样式值的全局变量；在该全局变量确定的情况下，页面元素的原始至越大，其相对样式值越大，在渲染后所展示出的实际样式值也越大。

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

本发明实施例中，基于所述目标字体大小对页面元素中文字的字体大小属性进行渲染；由前文所述的目标字体大小的计算过程可知，本发明实施例可以实现基于移动设备的屏幕宽度对目标字体大小进行缩放，又由于所述目标字体大小为页面根元素的字体大小，故页面中每个子元素的字体大小均可以根据该目标字体大小进行跳转，从而实现整个页面中文字的字体大小均可以随着移动设备的屏幕宽度的改变而同比例缩放。

本发明实施例中，基于上述相对样式值对各个页面元素的宽度、高度等与尺寸相关的属性进行渲染。由于同一页面中各个相对样式值都是基于同一预设标准值计算得到的，当任一页面元素的任一尺寸相关属性的实际样式值需要根据移动设备的屏幕宽度进行缩放时，其他所有页面元素的所有尺寸相关属性的实际样式值也随之同比例缩放，从而实现每个页面元素都随着移动设备的屏幕宽度的改变而同比例缩放，保证同一页面在不同屏幕宽度下所展示的的布局结构一致。

仍以前文所述的目标字体大小计算方法fontSize＝clientWidth/10，以及页面元素e2的相对样式值Width＝1rem、Height＝0.5rem、Margin-left＝0.3rem、Margin-right＝0.3rem为例，当移动设备的屏幕宽度clientWidth＝720px时渲染结果如图3所示：

目标字体大小为720/10＝72px；

页面元素e2的实际宽度为720*[1/(1+0.3+0.3)]＝720/1.6＝450px；

页面元素e2的实际高度为(450/1)*0.5＝225px；

页面元素e2的实际左边距为720*[0.3/(1+0.3+0.3)]＝720*0.3/1.6＝135px；

同样的，页面元素e2的实际右边距也为135px。

当clientWidth＝640px时渲染结果如图4所示：

目标字体大小为640/10＝64px；

页面元素e2的实际宽度为640*[1/(1+0.3+0.3)]＝640/1.6＝400px；

页面元素e2的实际高度为(400/1)*0.5＝200px；

页面元素e2的实际左边距(e2的左边缘距页面左边缘的实际距离)为640*[0.3/(1+0.3+0.3)]＝640*0.3/1.6＝120px；

同样的，页面元素e2的实际右边距也为120px。

对比图3和图4可知，屏幕宽度由720px缩小为640px时，目标字体大小、页面元素e2的宽度、高度、左边距和右边距也都随之缩小，页面布局结构保持一致。

另外，由于本发明实施例计算确定的目标字体大小为页面根元素的字体大小，各个元素的相对样式值的计量单位均采用相对于根元素的长度单位rem，故应用本发明实施例，最终渲染得到的页面，其字体大小和各个页面元素的与尺寸相关的样式值是随屏幕宽度同步缩放的，从而进一步保证不同屏幕宽度下的页面布局一致性。

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

图5为本发明实施例提供的另一种页面适配方法的流程图。如图5所示，该方法包括以下步骤：

S21、获取所述移动设备的屏幕宽度。

S22、判断所述屏幕宽度是否为预设屏幕宽度，如果是，则执行步骤S23，否则执行步骤S24。

S23、当所述所述屏幕宽度为预设屏幕宽度时，获取所述屏幕宽度对应的预设字体大小，将所述预设字体大小作为目标页面的目标字体大小，并继续执行步骤S25。

S24、当所述所述屏幕宽度不是预设屏幕宽度时，根据所述屏幕宽度计算目标页面的目标字体大小，并继续执行步骤S25；

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

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

上述实施例中，当所述所述屏幕宽度不是预设屏幕宽度时，执行的步骤S24至S26，其原理与前文所述步骤S12至S14相同，可相互参照理解，此处不再赘述。下面重点介绍本发明实施例在所述屏幕宽度为预设屏幕宽度时的处理过程。

考虑到在实际实现时，前文所述根据计算公式确定目标字体大小的方法，受代码调用(移动设备中一般使用基于JavaScript语言的代码)及运算效率的影响，故本发明实施例中，对于常见的屏幕宽度(即上述预设屏幕宽度)预先设定最佳字体大小，即上述预设字体大小，并在CSS文件等相关配置文件中存储该预设屏幕宽度与预设字体大小之间的对应关系，在页面渲染时，先判断当前的移动设备的屏幕宽度是否为上述预设屏幕宽度，如果是则可以直接读取该预设字体大小，作为目标页面的目标字体大小，从而可以省去计算字体大小的时间，提高页面渲染效率。

可选的，在本发明一个可行的实施例中，在判定移动设备的屏幕宽度为预设屏幕宽度时，可以利用层叠样式表CSS的媒体查询Media Queries来获取所述屏幕宽度对应的预设字体大小。

例如，相关技术人员在页面设计开发过程中，可以在CSS文件中通过如下媒体查询语句记录上述预设屏幕宽度和预设字体大小之间的对应关系：

@media screen and(width:320px){html{font-size:32px；}}

@media screen and(width:360px){html{font-size:36px；}}

@media screen and(width:375px){html{font-size:37.5px；}}

……

在渲染页面时，如果获取到的屏幕宽度为320px，则基于上述媒体查询语句可以确定预设字体大小为32px，直接将该32px作为目标字体大小，不再执行步骤S24(即前文所述步骤S12)所述的字体大小计算过程，从而可以提高页面渲染效率。

图6为本发明实施例提供的又一种页面适配方法的流程图。如图6所示，该方法包括以下步骤：

S31、获取所述移动设备的屏幕宽度。

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

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

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

S35、循环检测所述移动设备是否发生屏幕翻转，当检测到所述移动设备发生屏幕翻转时，返回上述步骤S31。

可选的，本发明实施例可以利用移动设备操作***都可识别的方向改变事件“orientationchange”来实现步骤S35中对屏幕翻转的检测。当用户将移动设备由竖屏改变为横屏，或者由横屏改变为竖屏时，移动设备操作***内触发上述方向改变事件“orientationchange”，在步骤S35中，可以直接检测是否发生上述方向改变事件，当检测到该方向改变事件时，即可确定移动设备的屏幕翻转，从而重新执行步骤S31及后续步骤，即获取屏幕翻转后的屏幕宽度，对目标页面重新渲染，以使目标页面适应翻转后的屏幕宽度。

可见，本发明实施例可以实现目标页面渲染过程中对在任意移动设备的任意屏幕方向的自动实时适配，始终保证目标页面的布局结构一致性，避免用户视觉混淆，提高用户体验。

在本申请又一种可行的实施例中，在根据所述字体大小和相对样式值加载渲染所述页面元素(即步骤S14、S26或S34)之后，还可以执行以下步骤，来实现目标页面随屏幕宽度的变化而自动实时适配：

根据预设间隔时间循环执行获取所述移动设备的屏幕宽度的步骤；

当本次获取到的屏幕宽度与前一次获取到的屏幕宽度不同时，根据本次获取到的屏幕宽度重新计算所述目标字体大小。

例如，每个2秒检测一次屏幕宽度，当本次检测到的屏幕宽度与前一次不同时，则说明屏幕宽度发生变化(相应的，移动设备由横屏变为竖屏，或由竖屏变为横屏)，故需要根据变化后的屏幕宽度，即本次检测到的屏幕宽度重新计算目标字体大小，并根据重新计算得到的目标字体大小及各个页面元素的相对样式值重新对目标页面的各个元素进行渲染，以使目标页面匹配变换后的屏幕宽度。

与前文所述的方法实施例相对应的，本发明实施例还提供了一种页面适配装置。参照图7所示的结构示意图，该装置至少包括：

屏幕宽度获取单元100，用于获取所述移动设备的屏幕宽度；

字体大小计算单元200，用于根据所述屏幕宽度计算目标页面的目标字体大小；

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

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

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

在本发明一个可行的实施例中，上述页面适配装置还可以包括：

预设宽度判断单元，用于判断所述屏幕宽度获取单元获取到的所述屏幕宽度是否为预设屏幕宽度；并在所述所述屏幕宽度为预设屏幕宽度时，触发字体大小查询单元，以及，在所述所述屏幕宽度不是预设屏幕宽度时，触发所述字体大小计算单元；

所述字体大小查询单元，用于获取所述屏幕宽度对应的预设字体大小，并将所述预设字体大小作为所述目标字体大小。

可选的，所述字体大小查询单元，具体被配置为：

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

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

在本发明一个可行的实施例中，上述页面适配装置还可以包括：屏幕翻转检测单元，用于在检测到所述移动设备发生屏幕翻转时，触发所述屏幕宽度获取单元重新获取所述移动设备的屏幕宽度。

在本发明一个可行的实施例中，上述页面适配装置还可以包括：循环控制单元，用于根据预设间隔时间控制所述屏幕获取单元循环执行获取所述移动设备的屏幕宽度的步骤，并在本次获取到的屏幕宽度与前一次获取到的屏幕宽度不同时，将根据本次获取到的屏幕宽度发送至所述字体大小计算单元，以使所述字体大小计算单元根据本次获取到的屏幕宽度重新计算所述目标字体大小。

本发明实施例中，在页面渲染完成后，还检测屏幕宽度是否发生变化，并在检测到屏幕宽度变化后，重新确定目标字体大小，并根据重新确定的目标字体大小及各个页面元素的相对样式值，重新对目标页面进行渲染，从而实现目标页面渲染过程中对在任意移动设备的任意屏幕方向的自动实时适配，始终保证目标页面的布局结构一致性，避免用户视觉混淆，提高用户体验。

本发明实施例提供了一种非暂态计算机存储介质，所述计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的页面适配方法。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory,ROM)或随机存储记忆体(RandomAccessMemory,RAM)等。

图8是本申请实施例七提供的执行页面适配方法的电子设备的硬件结构示意图，如图8所示，该设备包括：

一个或多个处理器610以及存储器620，图8中以一个处理器610为例。

执行页面适配方法的设备还可以包括：输入装置630和输出装置640。

处理器610、存储器620、输入装置630和输出装置640可以通过总线或者其他方式连接，图8中以通过总线连接为例。

存储器620作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本申请实施例中的页面适配方法对应的程序指令/模块(例如，附图7所示的屏幕宽度获取单元100、字体大小计算单元200、相对样式获取单元300和页面渲染单元400)。处理器610通过运行存储在存储器620中的非易失性软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例页面适配方法。

存储器620可以包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需要的应用程序；存储数据区可存储根据页面适配装置的使用所创建的数据等。此外，存储器620可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器620可选包括相对于处理器610远程设置的存储器，这些远程存储器可以通过网络连接至页面适配装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置630可接收输入的数字或字符信息，以及产生与页面适配装置的用户设置以及功能控制有关的键信号输入。输出装置640可包括显示屏等显示设备。

所述一个或者多个模块存储在所述存储器620中，当被所述一个或者多个处理器610执行时，执行上述任意方法实施例中的页面适配方法。

上述产品可执行本申请实施例所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本申请实施例所提供的方法。

本申请实施例的电子设备以多种形式存在，包括但不限于:

(1)移动通信设备:这类设备的特点是具备移动通信功能，并且以提供话音、数据通信为主要目标。这类终端包括:智能手机(例如iPhone)、多媒体手机、功能性手机，以及低端手机等。

(2)超移动个人计算机设备:这类设备属于个人计算机的范畴，有计算和处理功能，一般也具备移动上网特性。这类终端包括:PDA、MID和UMPC设备等，例如iPad。

(3)便携式娱乐设备:这类设备可以显示和播放多媒体内容。该类设备包括:音频、视频播放器(例如iPod)，掌上游戏机，电子书，以及智能玩具和便携式车载导航设备。

(4)服务器:提供计算服务的设备，服务器的构成包括处理器、硬盘、内存、***总线等，服务器和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

(5)其他具有数据交互功能的电子装置。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (11)

1.一种页面适配方法，其特征在于，应用于移动设备，包括：

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

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

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

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

2.根据权利要求1所述的方法，其特征在于，在获取所述移动设备的屏幕宽度之后，以及根据所述屏幕宽度计算目标页面的字体大小之前，还包括：

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

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

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

3.根据权利要求2所述的方法，其特征在于，获取所述屏幕宽度对应的预设字体大小，包括：

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

4.根据权利要求1所述的方法，其特征在于，在根据所述字体大小和相对样式值加载渲染所述页面元素之后，还包括：

当检测到所述移动设备发生屏幕翻转时，重新执行所述获取所述移动设备的屏幕宽度。

5.根据权利要求1所述的方法，其特征在于，在根据所述字体大小和相对样式值加载渲染所述页面元素之后，还包括：

根据预设间隔时间循环执行获取所述移动设备的屏幕宽度的步骤；

当本次获取到的屏幕宽度与前一次获取到的屏幕宽度不同时，根据本次获取到的屏幕宽度重新计算所述目标字体大小。

6.一种页面适配装置，其特征在于，包括：

屏幕宽度获取单元，用于获取所述移动设备的屏幕宽度；

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

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

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

7.根据权利要求6所述的页面适配装置，其特征在于，还包括：

预设宽度判断单元，用于判断所述屏幕宽度获取单元获取到的所述屏幕宽度是否为预设屏幕宽度；并在所述屏幕宽度为预设屏幕宽度时，触发字体大小查询单元，以及，在所述屏幕宽度不是预设屏幕宽度时，触发所述字体大小计算单元；

所述字体大小查询单元，用于获取所述屏幕宽度对应的预设字体大小，并将所述预设字体大小作为所述目标字体大小。

8.根据权利要求7所述的页面适配装置，其特征在于，所述字体大小查询单元，具体被配置为：

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

9.根据权利要求6所述的页面适配装置，其特征在于，还包括：

屏幕翻转检测单元，用于在检测到所述移动设备发生屏幕翻转时，触发所述屏幕宽度获取单元重新获取所述移动设备的屏幕宽度。

10.根据权利要求6所述的页面适配装置，其特征在于，还包括：

循环控制单元，用于根据预设间隔时间控制所述屏幕获取单元循环执行获取所述移动设备的屏幕宽度的步骤，并在本次获取到的屏幕宽度与前一次获取到的屏幕宽度不同时，将根据本次获取到的屏幕宽度发送至所述字体大小计算单元。

11.一种电子设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述一个处理器执行的指令，所述指令被被所述至少一个处理器执行，以使所述至少一个处理器能够：

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

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

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

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