一种移动设备网页单页面的布局方法及系统与流程

文档序号:12122870阅读:来源:国知局

技术特征:

1.一种移动设备网页单页面的布局方法,该方法中的单页面包括若干子页面;其特征在于,该方法包括以下步骤:

步骤A:移动设备获取需要进行页面布局的单页面的dpr和scale的基本设置,转到步骤B;

步骤B:若当前移动设备为安卓设备,将所述单页面的dpr修改为固定值后转到步骤C;若当前移动设备为ios设备,直接转到步骤C;

步骤C:判断当前移动设备的屏幕宽度W/dpr是否>屏幕宽度阈值,若是,则将W重新设置为屏幕宽度阈值·dpr后,根据新设置的W计算rem基准值;否则直接根据当前移动设备的屏幕宽度W计算rem基准值;将计算的rem基准值设置于页面根节点的样式表中,转到步骤D;

步骤D:在单页面的每个子页面上各设置1个有效内容缩放容器,有效内容缩放容器呈矩形,其中插入有对应子页面中需要缩放的元素,转到步骤E;

步骤E:将当前移动设备的屏幕高度作为有效内容缩放容器的可视高度h1,获取有效内容缩放容器的原始高度h2,根据h1和h2计算有效内容缩放容器中的元素的缩放比例S,S=h1/h2;判断S是否≥1,若是,则确认S对应的有效内容缩放容器的子页面不需要缩放;否则将S对应的有效内容缩放容器的子页面进行缩放,缩放比例为S。

2.如权利要求1所述的移动设备网页单页面的布局方法,其特征在于:步骤A中所述需要进行页面布局的单页面包括:在移动设备上输入网址后的显示页面、显示页面和回退页面发生尺寸改变事件后的改变页面、以及显示页面和改变页面发生页面回退显示事件后的回退页面;回退页面是指:从页面离开后又返回。

3.如权利要求1所述的移动设备网页单页面的布局方法,其特征在于:步骤C中所述屏幕宽度阈值为540,所述rem基准值的计算公式为W/10。

4.如权利要求1所述的移动设备网页单页面的布局方法,其特征在于:步骤C与步骤D之间还包括以下步骤:将以rem为单位的值转换成以px为单位的值。

5.如权利要求1至4任一项所述的移动设备网页单页面的布局方法,其特征在于:步骤E中所述对S对应的有效内容缩放容器的子页面进行缩放时,还包括以下流程,设置缩放中心为水平居中,垂直居顶。

6.如权利要求1至4任一项所述的移动设备网页单页面的布局方法,其特征在于:该方法还包括以下步骤:将单页面的viewport中设置页面缩放状态为禁止。

7.一种实现权利要求1至6任一项所述方法的移动设备网页单页面的布局系统,该系统中的单页面包括若干子页面;其特征在于,该系统包括基本设置获取模块、兼容性设置模块、rem基准值计算模块、缩放容器设置模块和子页面缩放模块;

基本设置获取模块用于:获取需要进行页面布局的单页面的dpr和scale的基本设置,向兼容性设置模块发送兼容性设置信号;

兼容性设置模块用于:收到兼容性设置信号后,检测移动设备的设备类型,若移动设备为安卓设备,将所述单页面的dpr修改为固定值后,向rem基准值计算模块发送rem基准值计算信号;若移动设备为ios设备,直接向rem基准值计算模块发送rem基准值计算信号;

rem基准值计算模块用于:收到rem基准值计算信号后,判断移动设备的屏幕宽度W/dpr是否>屏幕宽度阈值,若是,则将W重新设置为屏幕宽度阈值·dpr后,根据新设置的W计算rem基准值;否则直接根据移动设备的屏幕宽度W计算rem基准值;将计算的rem基准值设置于页面根节点的样式表中,向缩放容器设置模块发送缩放容器设置信号;

缩放容器设置模块用于:收到缩放容器设置信号后,在单页面的每个子页面上各设置1个有效内容缩放容器,有效内容缩放容器呈矩形,其中插入有对应子页面中需要缩放的元素,向子页面缩放模块发送子页面缩放信号;

子页面缩放模块用于:收到子页面缩放信号后,将移动设备的屏幕高度作为有效内容缩放容器的可视高度h1,获取有效内容缩放容器的原始高度h2,根据h1和h2计算有效内容缩放容器中的元素的缩放比例S,S=h1/h2;判断S是否≥1,若是,则确认S对应的有效内容缩放容器的子页面不需要缩放;否则将S对应的有效内容缩放容器的子页面进行缩放,缩放比例为S。

8.如权利要求7所述的移动设备网页单页面的布局系统,其特征在于:所述基本设置获取模块中需要进行页面布局的单页面包括:在移动设备上输入网址后的显示页面、显示页面和回退页面发生尺寸改变事件后的改变页面、以及显示页面和改变页面发生页面回退显示事件后的回退页面;回退页面是指:从页面离开后又返回。

9.如权利要求7所述的移动设备网页单页面的布局系统,其特征在于:所述rem基准值计算模块中的屏幕宽度阈值为540,rem基准值的计算公式为W/10。

10.如权利要求7至9任一项所述的移动设备网页单页面的布局系统,其特征在于:该系统还包括px转换模块,其用于:在rem基准值计算模块工作完成之后,将以rem为单位的值转换成以px为单位的值。

当前第2页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1