利索能及
我要发布
收藏
专利号: 2019109754596
申请人: 平安科技(深圳)有限公司
专利类型:发明专利
专利状态:已下证
更新日期:2026-06-16
缴费截止日期: 暂无
联系人

摘要:

权利要求书:

1.一种网页自适应布局方法,其特征在于,所述方法包括:将rem设置为CSS中元素width,height,margin,padding,left top属性的单位;

当网页打开时,根据终端屏幕大小调整HTML元素的font‑size值,使得body中元素的属性值随font‑size值同步调整;

计算设计稿宽高比和终端屏幕宽高比,并对比设计稿宽高比和终端屏幕宽高比得到对比结果,包括:获取所述设计稿的设计稿宽和设计稿高,根据设计稿宽除以设计稿高得到所述设计稿宽高比;

获取所述终端屏幕的屏宽和屏高,根据屏宽除以屏高得到所述终端屏幕宽高比;

对比所述设计稿宽高比和所述终端屏幕宽高比以得到对比结果;

当所述对比结果为所述终端屏幕宽高比小于所述设计稿宽高比时,根据所述屏高和所述设计稿宽高比计算出最小宽度,将所述最小宽度设置于HTML元素上,设置滚动条得到优化页面,其中,所述根据所述屏高和所述设计稿宽高比计算出最小宽度,包括:设置所述设计稿像素级高度与所述屏幕像素级高度一致,或者设置所述设计稿像素级高度与减去浏览器头部和底部像素级高度后剩余屏幕像素级高度一致,并根据所述设计稿宽高比得到所述设计稿像素级宽度,将所述设计稿像素级宽度设置为所述最小宽度;

当所述对比结果为所述终端屏幕宽高比大于所述设计稿宽高比时,以所述屏高乘以所述设计稿宽高比,得到实际显示的设计稿宽度,将所述实际显示的设计稿宽度通过DOM树赋值于body元素,并根据当前值及设计稿宽高比与屏幕宽高的比值计算并设置新的HTML元素font‑size值,将body元素水平居中,页面两侧空白处使用背景色填充得到优化页面。

2.如权利要求1所述的网页自适应布局方法,其特征在于,所述方法还包括:根据指令切换网页页面的页面模式;

当接收到呈现初始页面的指令时,页面切换为所述初始页面;

当接收到呈现优化页面的指令时,页面切换为所述优化页面。

3.如权利要求1所述的网页自适应布局方法,其特征在于,所述方法还包括:根据指令切换网页页面的场景模式;

当接收到进入特殊场景的指令时,页面切换为特殊场景模式;

当接收到进入普通场景的指令时,页面切换为普通场景模式。

4.如权利要求1所述的网页自适应布局方法,其特征在于,所述方法还包括:根据指令缩放页面或者页面内的指定内容;

当接收到针对网页的缩放指令时,对网页所有内容进行缩放;

当接收到针对网页指定内容的缩放指令时,对网页指定内容进行缩放。

5.一种服务器,其特征在于,所述服务器包括存储器、处理器,所述存储器上存储有可在所述处理器上运行的网页设计稿自适应布局系统,所述网页设计稿自适应布局系统被所述处理器执行时实现如权利要求1‑4中任一项所述的网页自适应布局方法的步骤。

6.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有网页设计稿自适应布局系统,所述网页设计稿自适应布局系统可被至少一个处理器执行,以使所述至少一个处理器执行如权利要求1‑4中任一项所述网页自适应布局方法的步骤。