一种手机终端的网页适配方法及其系统技术方案

本发明专利技术公开了一种手机终端的网页适配方法及其系统，该方法包括：用户侧手机终端的浏览器向网页服务器发送访问页面请求，网页服务器响应此请求且发送被请求访问的页面数据至手机终端的浏览器；网页服务器解析手机终端的浏览器接收的访问页面数据，获取对应于手机终端特性的页面属性的值；根据获取的页面属性的值，得到与手机终端屏幕相匹配的页面，最后由网页服务器发送至手机终端并在手机终端屏幕中显示匹配后的页面。

【技术实现步骤摘要】
一种手机终端的网页适配方法及其系统
本专利技术涉及互联网内容服务技术，尤其涉及一种手机终端的网页适配方法及其系统。
技术介绍
随着互联网领域不断发展以及手机的普及性越来越广泛，手机网络应用的现状也越来越复杂。目前手机的型号越来越多，而且不同的手机型号的屏幕大小各异，其分辨率也各不相同。此外，经过界面适配的WebAPP和原始WAP差别很大，WebAPP页面设计精美，能很好地辅助企业宣传、提高企业形象；功能多样化，可以很好地帮助企业做移动营销。原始WAP以文字展示为主，页面设计难以做到精美，功能简单。因此，目前的技术难以实现手机网站适配所有型号的手机以及适配手机屏幕的所有分辨率，达到手机终端访问的页面能够在手机屏幕上全屏且清晰显示的目的，以及让终端发挥出最大作用，降低终端及其整个访问过程的效率。
技术实现思路
为了解决现有技术的缺点，本专利技术提供一种手机终端的网页适配方法。这方法能够把不适合手机屏幕的网页转变为动态适合屏幕网页，进而通过移动终端的浏览器来访问，在开发跨平台的应用时，可以充分利用移动终端浏览器的HTML特性。为实现上述目的，本专利技术采用以下技术方案：本专利技术的一种手机终端的网页适配方法，包括：用户侧手机终端的浏览器向网页服务器发送访问页面请求，网页服务器响应此请求且发送被请求访问的页面数据至手机终端的浏览器；网页服务器解析手机终端的浏览器接收的访问页面数据，获取对应于手机终端特性的页面属性的值；根据获取的页面属性的值，得到与手机终端屏幕相匹配的页面，最后由网页服务器发送至手机终端并在手机终端屏幕中显示匹配后的页面。进一步的，所述对应于手机终端特性的页面属性包括：显示宽度和高度、适应手机终端屏幕的分辨率以及文件格式。进一步的，获取对应于手机终端特性的页面属性的值之后还包括：网页服务器还设置变量容器来存储对应于手机终端特性的页面属性的值。进一步的，在手机终端屏幕中显示匹配后的页面的过程中，利用调取浏览器中background-size属性使得匹配后的页面完全适配手机终端屏幕。进一步的，得到的与手机终端屏幕相匹配的页面为动态css样式，经预设时间延迟后在手机终端屏幕中显示匹配后的页面，避免页面元素短暂错位的现象。本专利技术还提供了一种手机终端的网页适配系统。本专利技术的一种手机终端的网页适配系统，包括网页服务器，所述网页服务器包括：访问页面请求响应模块，其用于接收用户侧手机终端的浏览器发送的访问页面请求，响应此请求且发送被请求访问的页面数据至手机终端的浏览器；页面数据解析模块，其用于解析手机终端的浏览器接收的访问页面数据，获取对应于手机终端特性的页面属性的值；页面匹配模块，其用于根据获取的页面属性的值，得到与手机终端屏幕相匹配的页面，最后发送至手机终端并在手机终端屏幕中显示匹配后的页面。进一步的，所述对应于手机终端特性的页面属性包括：显示宽度和高度、适应手机终端屏幕的分辨率以及文件格式。进一步的，所述网页服务器包括：变量容器设置模块，其用于设置变量容器来存储对应于手机终端特性的页面属性的值。进一步的，在页面匹配模块中，利用调取浏览器中background-size属性使得匹配后的页面完全适配手机终端屏幕。进一步的，得到的与手机终端屏幕相匹配的页面为动态css样式，经预设时间延迟后在手机终端屏幕中显示匹配后的页面，避免页面元素短暂错位的现象。与现有技术相比，本专利技术的有益效果是：(1)本专利技术把原生不适合手机屏幕的网页转变为动态适合屏幕网页，进而通过移动设备的浏览器来访问，其优势在于开发跨平台的应用时，可以充分利用现代移动浏览器的HTML特性。(2)本专利技术减少了不必要的重复开发，造成修改需求时，对一个相同的功能返回重复修改，此方法修改一个地方就可以改变需求。附图说明构成本申请的一部分的说明书附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。图1是本专利技术的一种手机终端的网页适配方法的流程图；图2是本专利技术的一种手机终端的网页适配系统的结构示意图。具体实施方式应该指出，以下详细说明都是例示性的，旨在对本申请提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本申请所属
的普通技术人员通常理解的相同含义。需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本申请的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。图1是本专利技术的一种手机终端的网页适配方法的流程图。如图1所示，本专利技术的一种手机终端的网页适配方法，包括：S101：用户侧手机终端的浏览器向网页服务器发送访问页面请求，网页服务器响应此请求且发送被请求访问的页面数据至手机终端的浏览器。S102：网页服务器解析手机终端的浏览器接收的访问页面数据，获取对应于手机终端特性的页面属性的值。其中，所述对应于手机终端特性的页面属性包括：显示宽度和高度、适应手机终端屏幕的分辨率以及文件格式。进一步地，获取对应于手机终端特性的页面属性的值之后还包括：网页服务器还设置变量容器来存储对应于手机终端特性的页面属性的值。S103：根据获取的页面属性的值，得到与手机终端屏幕相匹配的页面，最后由网页服务器发送至手机终端并在手机终端屏幕中显示匹配后的页面。具体地，在手机终端屏幕中显示匹配后的页面的过程中，利用调取浏览器中background-size属性使得匹配后的页面完全适配手机终端屏幕。其中，得到的与手机终端屏幕相匹配的页面为动态css样式，经预设时间延迟后在手机终端屏幕中显示匹配后的页面，避免页面元素短暂错位的现象。下面采用设计图宽度为480像素的来进行举例说明。设计图的宽高之比应该小于或者等于3:5；因为大多数手机分辨率的都大于或者等于3:5的比例。这样设计图的高做高一些至少可以保证不同的手机在一屏显示下不会出现因为效果图不够高而造成浏览器底部出现body颜色的情况。究其原因是因为图片像素较低。如果采用640宽度的来做。清晰度是很不错了。但图片太大了。介于移动端网站。网站的加载速度以及不同用户的网速都需要考虑在内。所以以480px宽度的来做在清晰度和加载速度中较为平衡。该效果的宽度是480px；内容框是402*460，距离上面和左边的边距是128和40；根据效果图的展示初步就可以开始切页面进行页面布局了。由于要适配不同手机的浏览器，使其宽度满屏填充。所以样式也要写动态的。而不是固定的。使用jquery写法很简便。就导入一个jquery文件。在js代码中，首先，定义一个pingKuan的全局变量。此变量用来存储当前手机屏幕的宽度。由于最外层的容器demo的width设置为100％；它是宽度平铺满手机屏幕的。所以这里取它的宽度为当前手机屏幕的宽度是很准确的。比使用$(window).width()更精准一些。其中，最外层的容器为：Viewport(视口)。屏宽确定之后，在设定一个比例的变量，这个变量就是以当前手机屏幕的宽度除以当前设计图的宽度来作为基准来算的一个比值。有了这个比值就可以根据效果图里元素的实际的宽度、边距离来适配所有手本文档来自技高网...

【技术保护点】
一种手机终端的网页适配方法，其特征在于，包括：用户侧手机终端的浏览器向网页服务器发送访问页面请求，网页服务器响应此请求且发送被请求访问的页面数据至手机终端的浏览器；网页服务器解析手机终端的浏览器接收的访问页面数据，获取对应于手机终端特性的页面属性的值；根据获取的页面属性的值，得到与手机终端屏幕相匹配的页面，最后由网页服务器发送至手机终端并在手机终端屏幕中显示匹配后的页面。

【技术特征摘要】
1.一种手机终端的网页适配方法，其特征在于，包括：用户侧手机终端的浏览器向网页服务器发送访问页面请求，网页服务器响应此请求且发送被请求访问的页面数据至手机终端的浏览器；网页服务器解析手机终端的浏览器接收的访问页面数据，获取对应于手机终端特性的页面属性的值；根据获取的页面属性的值，得到与手机终端屏幕相匹配的页面，最后由网页服务器发送至手机终端并在手机终端屏幕中显示匹配后的页面。2.如权利要求1所述的一种手机终端的网页适配方法，其特征在于，所述对应于手机终端特性的页面属性包括：显示宽度和高度、适应手机终端屏幕的分辨率以及文件格式。3.如权利要求1所述的一种手机终端的网页适配方法，其特征在于，获取对应于手机终端特性的页面属性的值之后还包括：网页服务器还设置变量容器来存储对应于手机终端特性的页面属性的值。4.如权利要求1所述的一种手机终端的网页适配方法，其特征在于，在手机终端屏幕中显示匹配后的页面的过程中，利用调取浏览器中background-size属性使得匹配后的页面完全适配手机终端屏幕。5.如权利要求1所述的一种手机终端的网页适配方法，其特征在于，得到的与手机终端屏幕相匹配的页面为动态css样式，经预设时间延迟后在手机终端屏幕中显示匹配后的页面，避免页面元素短暂错位的现象。6.一种手机...

【专利技术属性】
技术研发人员：任年峰，侯发毅，张伟，
申请(专利权)人：山大鲁能信息科技有限公司，
类型：发明
国别省市：山东,37