[发明专利]一种移动设备网页单页面的布局方法及系统

摘要

本发明公开了一种移动设备网页单页面的布局方法及系统，涉及移动设备的网页布局领域。该方法的步骤为：在移动设备上获取需要进行页面布局的单页面的dpr和scale的基本设置、并进行兼容性处理；根据移动设备的屏幕宽度和dpr计算rem基准值，将rem基准值设置于页面根节点的样式表中；在每个子页面上各设置1个有效内容缩放容器，其中插入有对应子页面中需要缩放的元素；根据有效内容缩放容器的可视高度和原始高度h2计算缩放比例，需要时根据缩放比例对子页面进行缩放。本发明能够在一次布局样式中，在移动设备屏幕中完整显示所有需要进行页面布局的页面，进而保证移动设备页面布局的质量。

主权项

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。