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

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN106776969A(43)申请公布日2017.05.31(21)申请号201611105479.0(22)申请日2016.12.05(71)申请人乐视控股（北京）有限公司地址100026北京市朝阳区姚家园路105号3号楼10层1102申请人乐视致新电子科技（天津）有限公司(72)发明人刘富恩李晓凤(74)专利代理机构北京弘权知识产权代理事务所(普通合伙)11363代理人逯长明许伟群(51)Int.Cl.G06F17/30(2006.01)权利要求书2页说明书11页附图4页(54)发明名称页面适配方法、装置及电子设备(57)摘要本发明实施例提供一种页面适配方法、装置及电子设备，根据基于屏幕宽度的目标字体大小计算方法，以及各个页面元素的相对样式值，可以在任一移动终端请求访问该目标页面时，确定适用于该移动终端的屏幕宽度的目标字体大小及各个页面元素的实际样式值。本发明实施例可以根据移动设备的屏幕宽度自适应调整页面的字体大小及页面元素的尺寸；同时，本发明实施例只需对每个页面设计一个包含上述基于屏幕宽度的目标字体大小计算方法及各个页面元素的相对样式值的样式文件，就可以确定与任一屏幕宽度相匹配的实际渲染样式，既可以减少页面设计与维护的工作量，还可以简化样式代码，提高执行效率，减少页面加载时间，并保证页面布局结构的一致性。CN106776969ACN106776969A权利要求书1/2页1.一种页面适配方法，其特征在于，应用于移动设备，包括：获取所述移动设备的屏幕宽度；根据所述屏幕宽度计算目标页面的目标字体大小；获取所述目标页面中各个页面元素的相对样式值；所述相对样式值为所述页面元素的原始值和预设基准值之比；根据所述目标字体大小和相对样式值渲染所述页面元素。2.根据权利要求1所述的方法，其特征在于，在获取所述移动设备的屏幕宽度之后，以及根据所述屏幕宽度计算目标页面的字体大小之前，还包括：判断所述屏幕宽度是否为预设屏幕宽度；当所述屏幕宽度为预设屏幕宽度时，获取所述屏幕宽度对应的预设字体大小，并将所述预设字体大小作为所述目标字体大小；当所述屏幕宽度不是预设屏幕宽度时，执行根据所述屏幕宽度计算目标页面的目标字体大小的步骤。3.根据权利要求2所述的方法，其特征在于，获取所述屏幕宽度对应的预设字体大小，包括：利用层叠样式表CSS的媒体查询来获取所述屏幕宽度对应的预设字体大小。4.根据权利要求1所述的方法，其特征在于，在根据所述字体大小和相对样式值加载渲染所述页面元素之后，还包括：当检测到所述移动设备发生屏幕翻转时，重新执行所述获取所述移动设备的屏幕宽度。5.根据权利要求1所述的方法，其特征在于，在根据所述字体大小和相对样式值加载渲染所述页面元素之后，还包括：根据预设间隔时间循环执行获取所述移动设备的屏幕宽度的步骤；当本次获取到的屏幕宽度与前一次获取到的屏幕宽度不同时，根据本次获取到的屏幕宽度重新计算所述目标字体大小。6.一种页面适配装置，其特征在于，包括：屏幕宽度获取单元，用于获取所述移动设备的屏幕宽度；字体大小计算单元，用于根据所述屏幕宽度计算目标页面的目标字体大小；相对样式获取单元，用于获取所述目标页面中各个页面元素的相对样式值；所述相对样式值为所述页面元素的原始值和预设基准值之比；页面渲染单元，用于根据所述目标字体大小和相对样式值渲染所述页面元素。7.根据权利要求6所述的页面适配装置，其特征在于，还包括：预设宽度判断单元，用于判断所述屏幕宽度获取单元获取到的所述屏幕宽度是否为预设屏幕宽度；并在所述屏幕宽度为预设屏幕宽度时，触发字体大小查询单元，以及，在所述屏幕宽度不是预设屏幕宽度时，触发所述字体大小计算单元；所述字体大小查询单元，用于获取所述屏幕宽度对应的预设字体大小，并将所述预设字体大小作为所述目标字体大小。8.根据权利要求7所述的页面适配装置，其特征在于，所述字体大小查询单元，具体被配置为：2CN106776969A权利要求书2/2页利用层叠样式表CSS的媒体查询来获取所述屏幕宽度对应的预设字体大小。9.根据权利要求6所述的页面适配装置，其特征在于，还包括：屏幕翻转检测单元，用于在检测到所述移动设备发生屏幕翻转时，触发所述屏幕宽度获取单元重新获取所述移动设备的屏幕宽度。10.根据权利要求6所述的页面适配装置，其特征在于，还包括：循环控制单元，用于根据预设间隔时间控制所述屏幕获取单元循环执行获取所述移动设备的屏幕宽度的步骤，并在本次获取到的屏幕宽度与前一次获取到的屏幕宽度不同时，将根据本次获取到的屏幕宽度发送至所述字体大小计算单元。11.一种电子设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述一个处理器执行的指令