基于HTML5CSS3政府网站移动前端设计.docVIP

基于HTML5CSS3政府网站移动前端设计 　　针对政府网站移动用户的访问需求，提出HTML5+CSS3的解决方案，通过页面设置JS代码跳转的方式，实现PC端和移动端设备访问同一域名跳转至相应页面，通过viewport标签、REM单位来实现不同分辨率移动设备下的页面适配。应用实例表明，该方法具有较高的执行效率，能避免政府网站在App客户端上的投入，适用于中小规模的政府网站提升移动用户体验度。 　　【关键词】网站 政府网站 移动 HTML5标签 模板 代码 　　1 概述 　　近日，国务院App客户端正式上线。通过让政策服务走进每个人的“口袋”，渗透到公众生活的各个角落，并逐渐成为公众获取信息的主要方式之。移动互联网时代的背景下，App可以说是政府做好公共服务必须采用的工具和平台，也是政府向公众提供全面、及时、细致服务最为便捷的手段和途径之一。但是针对一些部门和地区的政府网站，独立开发App会产生较高的网站成本，这对于一部分政府网站实现App是有困难的，而政府网站直接通过手机浏览虽然可以正常浏览，但是由于网站模板专为桌面浏览器设计，用户体验不是很好。 　　为解决手机访问传统政府网站出现的问题，笔者结合应用实例，通过HTML5特性对原有网站进行移动前端设计，提出一套网站后台两套模板来适配移动用户的访问，针对中心型政府网站提升移动用户体验度，不失为一个高效和经济的好方法。 　　2 HTML5自适应网页设计 新特性 　　随着高端手机（Andriod，Iphone，Ipod，WinPhone等）的盛行，移动网站前端应用开发也越来越受到人们的重视。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？2010年，Ethan Marcotte提出了“自适应网页设计”这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。HTML5中新标签 meta viewport可以很好地解决网站在手机端自适应问题，用html5设计网站移动前端是最好的选择。 　　3 构建政府网站移动前端的技术要点 　　本文通过对HTML5标签的应用讲解，在原有网站模板的基础上设计改造，使用一套网站后台两套模板的方式，自动识别来访的设备，针对PC桌面端和移动端使用不同的页面模板输出页面，并通过HTML5的支持移动浏览器的特性，使其适合多种移动设备进行访问。下面以笔者所在单位的政府网站移动端设计为例，介绍通过HTML5标签实现政府网站移动前端实现和技术要点。 　　3.1 访问设备识别 　　本部分是通过统一的网站域名入口，对不同设备访问请求跳转至对应的页面，通过网站首页设置javascript代码完成设备的识别和跳转，具体代码如下： 　　通过navigator.userAgent来判断浏览器类型，从而实现PC和移动客户端的识别 和跳转。需要注意的是js代码应放在head的第一行，这样就不会出现在手机端输入PC端网页的域名会先完全加载完毕网页才跳转到手机端的网页。 　　除了js判断以外，还有通过服务器端User Agent判断，cookie判断等多种方式，这里就以笔者所用的方式做主要介绍。 　　3.2 网页框架响应各种不同分辨率的移动设备 　　我们熟悉的传统PC端网站，目前的页面设计尺寸以适应1024（px）宽度的分辨率为主，而移动端的页面需要适应的尺寸更为复杂，如iphone系列的手机就有多种分辨率和屏幕尺寸，解决好网页适配或响应各种不同分辨率的移动设备，我们需要使用到html5的viewport和viewport有关的meta标签的使用。meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。 　　一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。我们在开发移动网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：该meta标签的作用是让当前viewport的宽度等于设备的宽度，为了防止移动Browser根据不同屏幕的像素密度对页面进行缩放，我们可以把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。viewport宽度既可以设置 width=device-width，也可以设置 initial-scale=1，两者都写上去可以兼容大多数手机浏览器。 　　3.3 构建移动前端页面布局