[发明专利]针对浏览器不同分辨率的像素级定位方法和装置

说明书

本申请公开了一种针对浏览器不同分辨率的像素级定位方法和装置。该方法包括：利用图像处理软件以第一分辨率为基准设计页面，同时为像素为单位标注页面中每个元素的尺寸和坐标；制作每个元素的文件；将页面按照功能拆分成相对独立的功能模块；提取功能模块的CSS文件中元素的尺寸值和坐标属性，保存到与该功能模块对应的JS文件的变量中，同时将该变量引用到与HTML文件相对应的位置；在进行页面渲染时，将用户设备浏览器的第二分辨率，写入HTML文件，HTML文件根据CSS文件和JS文件中对功能模块的元素的尺寸值和坐标属性进行调整。采用该方法仅需读取用户设备的浏览器的分辨率这一个参数就能实现页面所有元素的变换以适应不同浏览器的屏幕大小和分辨率。

技术领域

本申请涉及网络数据处理领域，特别是涉及针对浏览器不同分辨率的像素级定位方法和装置。

背景技术

近些年来，随着移动互联网的高速发展，便携式移动设备与互联网的结合，大大改变了我们的生活方式和工作方式，尤其是智能手机的快速普及，彻底颠覆了传统手机只能作为通讯工具这一概念。

当今移动设备的发展已经越来越迅速，用户会越来越多的通过手机、上网本、ipad之类的移动设备来浏览网页，针对移动web开发的需求也越来越多。许多大平台、大门户都纷纷推出了自己的移动web版网站。同时移动设备屏幕的尺寸与分辨率也越来越碎片化，各个品牌、型号都不统一，这种情况下传统的固定宽度的设计方案就显得越发不合理。页面需要有更好的适应性，其布局结构要做到根据不同的设备及分辨率进行调整，以达到视觉效果一致。

目前主要使用的方式有两种，一种是将计算页面中的各种控件元素的尺寸位置等单位用百分比(％)来设置。另一种是将计算页面中的各种控件元素的尺寸位置等单位用相对于根元素字体大小的单位(font size of the root element,REM)来设置。这样页面中的各种控件元素将会根据设备的尺寸与分辨率自动的缩放。

由于设计师用Photoshop来制作设计稿时，各个尺寸与坐标都是以像素(pixel,PX)为单位来制作的，这就需要前端开发人员在开发网页的时候把每一个尺寸与坐标都换算成百分比或者REM为单位的值并写入层叠样式表(Cascading Style Sheets,CSS)文件中，且一旦页面有细小的改动，该页面的控件元素需要重新换算。开发繁琐，耗时较长。

发明内容

本申请的目的在于克服上述问题或者至少部分地解决或缓减解决上述问题。

根据本申请的一个方面，提供了一种针对浏览器不同分辨率的像素级定位方法，包括：

页面标注步骤：利用图像处理软件以第一分辨率为基准设计页面，同时为像素为单位标注所述页面中每个元素的尺寸和坐标；

文件制作步骤：基于所述页面中每个元素的尺寸和坐标，制作每个元素的HTML文件、CSS文件和JavaScript文件；

模块划分步骤：将所述页面按照功能拆分成相对独立的若干功能模块，每个功能模块都包括与其功能相关的HTML文件、CSS文件和JavaScript文件，其中，每个文件中包括功能模块之间相互调用的接口和与其他文件之间相互调用的接口；

变量提取步骤：提取所述功能模块的CSS文件中元素的尺寸值和坐标属性，将尺寸值和坐标属性保存到与该功能模块对应的JavaScript文件的变量中，同时将该变量引用到与所述HTML文件相对应的位置；

元素调整步骤：在进行页面渲染时，将用户设备的浏览器的第二分辨率，写入所述HTML文件，所述HTML文件根据所述CSS文件和所述JavaScript文件中对所述功能模块的元素的尺寸值和坐标属性进行调整。