本发明涉及移动设备的网页布局领域，具体涉及一种移动设备网页单页面的布局方法及系统。
背景技术：
移动设备(手机、平板电脑等)的h5页面(基于html5和css3技术开发的支持移动端浏览器的web页面)一般采用SPA(single page web application，单页Web应用程序，即加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序)进行页面应用。
SPA的形式为多张占满整个屏幕的单独子页面组成的一个队列形式的单页面，用户在移动设备的触屏上滑动页面来实现不同的子页面的切换(手指向下滑动切换到上一子页面，若无上一子页面则返回至当前子页面；手指向上滑动切换到下一子页面，若无下一子页面则返回至当前子页面)。
页面开发人员一般会使用CSS(Cascading Style Sheets，层叠样式表)中的百分比布局方式来实现页面的自适应。由于每张页面可能存在一些独立定位的组件(例如点击下滑按钮、音乐播放暂停按钮、弹出层等)，因此当屏幕分辨率、屏幕尺寸与设计预期差别较大时，采用百分比布局方式来实现页面的自适应容易产生：布局混乱、错位或者有效内容区域被遮挡无法完全显示的问题。因此，采用百分比布局方式来实现具有独立定位组件页面的自适应时，难以保证页面与独立定位组件的兼容，进而极大的降低页面布局的质量。
技术实现要素：
针对现有技术中存在的缺陷，本发明解决的技术问题为：在一次布局样式中，在移动设备屏幕中完整显示所有需要进行页面布局的页面。
为达到以上目的，本发明提供的移动设备网页单页面的布局方法，该方法中的单页面包括若干子页面；该方法包括以下步骤：
步骤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。
本发明提供的实现上述方法的移动设备网页单页面的布局系统，该系统中的单页面包括若干子页面；其特征在于，该系统包括基本设置获取模块、兼容性设置模块、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。
与现有技术相比，本发明的优点在于：
本发明能够在一次布局样式中，对所有需要进行页面布局的单页面合理的计算rem基准值、并根据ren基准值对单页面进行重新设备；在此基础上，本发明通过子页面中设置的有效内容缩放容器计算缩放比例，根据缩放比例决定是否需要缩放设置单页面中的子页面，以使得子页面缩放在移动设备屏幕中完整显示。
有鉴于此，与现有技术中设计与预期具有差别时无法完全显示页面相比，本发明能够在一次布局样式中，即使在不同的系统、浏览器、移动设备屏幕分辨率和尺寸比例的情况下，也能保持页面比例不失真、并且能够完整显示有效内容；而且在移动设备屏幕长宽比例特殊或者横屏状态下均能够完整显示子页面。因此，本发明能够保证移动设备页面布局的质量。
附图说明
图1为本发明实施例中移动设备网页单页面的布局方法的流程图。
具体实施方式
以下结合附图及实施例对本发明作进一步详细说明。
本发明实施例中的移动设备网页单页面为若干子页面组成的页面队列形式；在此基础上，参见图1所示，本发明实施例中的移动设备网页单页面的布局方法，包括以下步骤：
S1：在移动设备上通过Javascript(直译式脚本语言)获取需要进行页面布局的单页面html头部中的dpr(设备像素比)和scale(页面缩放倍数)的基本设置、并进行兼容性处理。
兼容性处理的具体流程为：
若当前移动设备为安卓设备，因为安卓机型的系统没有统一，所以为了防止特殊的dpr值使S2中计算rem基准值时出现不可知的意外结果，进而导致页面布局混乱，会将dpr修改为固定值(本实施例中为1)后执行S2。
若当前移动设备为ios设备，因为ios系统由苹果公司独家维护，所以不需要统一设置，即直接执行S2。
S1中需要进行页面布局的页面包括：在移动设备上输入网址后的显示页面、显示页面和回退页面发生尺寸改变事件后(例如发生翻转)的改变页面、以及显示页面和改变页面发生页面回退显示事件后的回退页面。回退页面是指：从页面离开后又返回，此时浏览器可能为了节约流量不会重新刷新页面，此时需要重新计算rem基准值。
S2：通过Javascript获取当前移动设备的屏幕宽度W，根据W和dpr设置rem基准值(font size of the root element，是指相对于根元素的字体大小的单位，rem基准值的大小基于页面根节点<html>上设置的字体大小，例如<html>设置的字体大小为10px，则1rem等于10px)。通过Javascript将rem基准值设置于页面根节点<html>的样式表中，使得rem单位能够识别，转到S3。
S2中根据W和dpr设置rem基准值的具体流程为：
S201：判断W/dpr是否>540(屏幕宽度阈值)，若是，则将W重新设置为540·dpr后转到S302；否则直接转到S202。
S202：将rem基准值设置为W/10(设计稿宽度多是10的倍数，所以为了rem的基准值不要太大，导致以rem为单位的值过小，故此处设置为10)，转到S3。
因为此处rem基准值是根据设置在页面根节点<html>上的字体大小计算得来的，所以必须通过上述算法获取新的rem基准值、并设置在页面上，才能发挥rem的布局作用。
S3：通过Javascript，在单页面的viewport(页面屏幕的基础设置，通过该设置可以控制屏幕的显示比例)中设置页面缩放状态为禁止，防止用户缩放屏幕，转到S4；实际应用中S3可以执行任意步骤的过程中、之前或之后进行。
完成S1至S3后，用户可不用担心页面宽度变化对页面元素定位和尺寸的影响，在开发CSS布局的时候可以大量采用绝对定位(直接设置元素的尺寸和相对于父元素的坐标)这种简单粗暴的定位方式，而定位用的坐标和尺寸可以直接从设计稿上量取，用户编写页面样式的时候只需要简单的通过单次编写布局就可以保证在所有尺寸的屏幕上都能比例不失真的显示。
与此同时，由于重新设置了rem基准值，页面的内容可能无法完整显示，因此本发明采用缩放有效内容区域的方法来解决屏幕比例特殊的情况下页面内容不完整显示问题，详情请参见S4～S6。
在S3和S4之间，可以将px(像素)与rem的相互转换工具置于Javascript的全局环境之中，以供开发人员通过Javascript操作css属性的时候方便的将以rem为单位的值转换成以px为单位的值，其目的是为了方便部分用户的操作习惯。因为部分用户喜欢通过Javascript来控制样式以及尺寸坐标值，此时如果以rem为单位则会造成使用不便(比如研发人员想把一个元素的宽度通过Javascript改成设计稿上的200像素，然后得去算这个200px转换成rem是多少rem，最后算到的还是一个循环小数)。
S4：通过Javascript在单页面的每个子页面上各设置1个有效内容缩放容器，将子页面上需要缩放的元素插入有效内容缩放容器，进而区分需要缩放的元素和其他不需要缩放的元素，转到S5。
S4中的有效内容缩放容器是用html和css在页面中画出来的透明矩形用来区分页面中的功能块(例如头部导航、播放器、微博分享、抽奖等)。
S5：将移动设备的屏幕高度作为有效内容缩放容器的可视高度h1，获取有效内容缩放容器的原始高度h2，根据h1和h2计算有效内容缩放容器中的元素的缩放比例S，S＝h1/h2，转到S6。
S5的具体实施流程为：
var visibleHeight＝doms.body.height()；//获取有效内容缩放容器的可视高度；
var originHeight＝doms.paper.eq(0).height()；//获取有效内容缩放容器的原始高度；
var scale＝visibleHeight/originHeight；//计算缩放比例。
S6：判断S是否≥1，即if(scale<1)，若是，则说明当前S对应的有效内容缩放容器的子页面的可视范围大于原始范围，该子页面的内容可以完整显示，不需要缩放，结束，否则通过CSS的2d变换将当前S对应的有效内容缩放容器的子页面进行缩放，缩放比例为S。
S6中对有效内容缩放容器的子页面进行缩放的具体流程为：
S601：设置缩放中心为水平居中，垂直居顶：
若移动设备的浏览器为webkit内核浏览器，则实现代码为'-webkit-transform-origin':'50％0'，转到S602；
若移动设备的浏览器为非webkit内核浏览器，则实现代码为'transform-origin':'50％0'，转到S602。
S602：设置缩放比例为S：
若移动设备的浏览器为webkit内核浏览器，则实现代码为'-webkit-transform':'scale('+scale+')'；
若移动设备的浏览器为非webkit内核浏览器，则实现代码为'transform':'scale('+scale+')'。
S5和S6使得每一子页面的有效内容区域，在宽度与移动设备屏幕宽度相同、高度大于移动设备屏幕高度的情况下，也能缩放在移动设备屏幕中完整显示。
本发明实施例提供的实现上述方法的移动设备网页单页面的布局系统，该系统中的单页面包括若干子页面。该系统包括基本设置获取模块、兼容性设置模块、rem基准值计算模块、px转换模块、缩放容器设置模块和子页面缩放模块。
基本设置获取模块用于：获取需要进行页面布局的单页面的dpr和scale的基本设置，向兼容性设置模块发送兼容性设置信号。
需要进行页面布局的单页面包括：在移动设备上输入网址后的显示页面、显示页面和回退页面发生尺寸改变事件后的改变页面、以及显示页面和改变页面发生页面回退显示事件后的回退页面；回退页面是指：从页面离开后又返回。
兼容性设置模块用于：收到兼容性设置信号后，检测移动设备的设备类型，若移动设备为安卓设备，将所述单页面的dpr修改为固定值(1)后，向rem基准值计算模块发送rem基准值计算信号；若移动设备为ios设备，直接向rem基准值计算模块发送rem基准值计算信号。
rem基准值计算模块用于：收到rem基准值计算信号后，判断移动设备的屏幕宽度W/dpr是否>屏幕宽度阈值(540)，若是，则将W重新设置为540·dpr后，根据新设置的W计算rem基准值(rem基准值的计算公式为W/10)；否则直接根据移动设备的屏幕宽度W计算rem基准值(rem基准值的计算公式为W/10)；将计算的rem基准值设置于页面根节点的样式表中，向缩放容器设置模块发送缩放容器设置信号。
px转换模块用于：在rem基准值计算模块工作完成之后，将以rem为单位的值转换成以px为单位的值。
缩放容器设置模块用于：收到缩放容器设置信号后，在单页面的每个子页面上各设置1个有效内容缩放容器，有效内容缩放容器呈矩形，其中插入有对应子页面中需要缩放的元素，向子页面缩放模块发送子页面缩放信号；
子页面缩放模块用于：收到子页面缩放信号后，将移动设备的屏幕高度作为有效内容缩放容器的可视高度h1，获取有效内容缩放容器的原始高度h2，根据h1和h2计算有效内容缩放容器中的元素的缩放比例S，S＝h1/h2；判断S是否≥1，若是，则确认S对应的有效内容缩放容器的子页面不需要缩放；否则将S对应的有效内容缩放容器的子页面进行缩放，缩放比例为S。
本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。