国内高校手机、ipad等触屏网站建设现状、模式、及发展前景研究

马亮

摘要：由于互联网的普及和展示信息的及时便捷，高校基本都建设了pc版网站，这些网站大大提高了高校向外界提供、展示信息的能力，改善了办公效率。但是，截至2016年12月，我国网民规模达7.31亿，手机网民占比达95.1%，手机在上网设备中占据主导地位。由于通过手机浏览pc版网站操作体验不佳，很多高校已经开始建设手机等智能触屏版网站。本课题组通过调查研究，结合对国外的相调查，对国内高校手机、iPad等触屏版网站的建设现状、模式、及发展前景进行了分析研究。

关键词：网站；网站建设；手机网站；移动网站；触屏网站

说明：根据目前现状，用户使用的移动触屏终端主要是手机，使用iPad等其它移动触屏设备较少，本文主要使用“手机网站”这个词汇，如果需要将手机、iPad等移动触屏终端单独分析时，本文会说明；本文只所以把研究范围限定在国内，是因为国外和国内软硬件发展、文化是有差异，但研究时，也会结合国外的发展情况。

根据中国互联网络信息中心2017完成的第39次《中国互联网络发展状况统计报告》，截至2016年12月，我国网民规模达7.31亿，普及率达到53.2%，超过全球平均水平3.1个百分点，超过亚洲平均水平7.6个百分点，手机网民占比达95.1%，我国手机网民规模达6.95亿，增长率连续三年超过10%，台式电脑、笔记本电脑的使用率均出现下降。但是，由于高校原来建设的传统pc网站，只适合大屏显示器和鼠标操作，并不适合小显示屏和触屏手势操作，导致传统网站使用手机、iPad等浏览，虽然能基本满足功能需要，但浏览、使用的体验较差，为了给使用手机等触屏设备的用户提供更好的用户体验，提高办公效率，很多高校已经开始着手建设手机版网站。本文通过调查研究，对国内高校手机、iPad等触屏版網站的建设现状、模式、及发展前景进行了分析研究，结合国外发展状况，尝试提供一些建设方面的建议供各方参考。

1.国内高校手机版网站建设现状

1.1国内高校信息化软硬件现状

国内高校手机网站建设现状，主要由高校信息化软硬件的水平决定的。经过查阅文献资料、到一部分高校的信息中心走访，结合我校的信息化情况，本课题组发现，国内高校中还有相当多台式计算机较陈旧，安装的是windows xp系统，而windows7系统在高校占比最大。根据“友盟+”互联网流量分析网站（https：//www.umeng.com/）的数据，从2017年2月20至2017年4月1日访问我校主网站的用户终端的操作系统及浏览器软件情况如表1-表3所示。移动终端占比较少是合理的，因为此期间主要为上班期间，校内职工主要使用台式机办工。

我们以下称ie8以及ie8以下的ie浏览器为ie低版本浏览器。下表2显示，ie低版本浏览器表面上点了5.29%，但其他众多的国内浏览器也使用ie内核，所以真正使用ie低版本浏览器的台式计算机远远大于5.29%，表1中的数据也有力地支持了这一结论，表1显示有14.45%的台式计算机还在使用windows xp操作系统，windows xp操作系统预装的是ie6浏览器，极有可能有14.45%的用户在使用ie6浏览网站，即使部分此类计算机安装了独立的非ie内核浏览器或者双内核浏览器，使用ie低版本浏览器的用户也是一个不容忽视的比例。

我校的这些数据，在国内高校中并不是特有现象，具有一定的代表性。近几年，我校的信息化建议相比较其他高校，还算走在前列，信息化水平较高。

1.2国内高校手机版网站建设现状

本课题组通过直接浏览高校主网站的形式，访问了国内大部分本科院校和一部分高职院校的网站，统计表明近130所高校建设了手机版网站，而且高校手机版网站建设呈现以下特点：（1）几乎所有的高校网站都建立在网站群系统之上；（2）西部地区建设手机网站的比例较少，主要集中在沿海较发达的地区，而且影响力较高的院校、本科院校建设手机版网站的比例较高；（3）有些手机版网站在有些浏览器（尤其是低版本的ie浏览器）兼容性不够；（4）绝大部分，只针对主网站建设了手机版网站。

分析上述现状的成因，（1）之所以高校几乎都在使用网站群建设网站系统，是因为从公司购买的网站群为高校快速的建设众多网站提供了基础架构和基础模块，公司有更专业的研发能力，一般网站群在定期功能升后，安全性、稳定性、功能性都要比高校自己从零开发的网站系统强大很多；（2）手机版网站建设首先主要集中在东部沿海发达地区、以及重点院校，是因为这些高校接触新技术更及时、技术人才多、经济实力较雄厚；（3）有些手机版网站，使用了css3中的媒体查询功能，利用一套模板响应各种pc、手机、iPad等各种终端，并没有专门建设手机版网站，这种方案虽然少维护了一套模板，但由于国内高校相当一部分Pc设备比较落后，有的还在运行windows xp，在使用低版本的ie浏览器，而这些浏览器并不支持css3媒体查询功能，虽然通过采用一些技术可以让这些低版本ie部分支持媒体查询，但毕竟不是浏览器原生支持，在运行中总会有很多问题出现；4、由于手机等智能终端的出现，导致网站建设技术在近10年内出现了剧烈的变化，目前还是一个相关技术动荡、逐步完善的阶段，pc端的旧版本浏览器也在淘汰之中，在此阶段，还不宜大规模建设手机版网站。

2.国内高校手机版网站建模式

本课题组访问了国内近130所高校已经建设的手机版网站，分析发现这些手机版网站的建设模式并不相同，总体来说分为两类：（1）分别为pc版网站和手机版网站各提供一套模版；f2膜用客户端自适应响应设计模式，只向用户推送一套模版和代码，利用css3的媒体查询功能，由用户的浏览器根据自身特性进行差异化显示。经过本课题组研究分析，这两种方式各有利弊。

2.1分别为pc版网站和手机版网站各提供一套模版

使用此种模式，当用户浏览网站的请求到达服务器后，由服务端程序判断客户端浏览器的特点和设备情况，然后向客户端浏览器推送符合客户端软硬件设备特点的html流。优点如下：（1）由于手机版和pc版分开，互不影响，在设计两个版式时，彼此不受影响，可以做到ui界面、功能迥异，互不干扰；（2）由于两个版式单独设计，发送给客户端浏览器的代码比较简洁，没有冗余代码；（3）由于两个版式单独设计，客户端也不需要加载多余的资源；（4）由于pc端有相当一部分浏览器还是低版本的ie，无法尽情发挥html5的功能，但手机等智能终端的浏览器由于发展晚、起点高，对htm15的支持良好，可以为手机版网站加载html5标签和功能。缺点如下：（1）需要维护两个模板；（2）极有可能导致一条信息，两个链接，这个取决于程序的编写和站群系统的选择。

我校此次手机版网站建设，使用了此种方式。现在国内外各大新闻门户网站基本上都采用这种形式，有一分部高校也采用了这种方式。但采用两套模板，往往导致一个信息有两个信息源，手机版网站和pc版网站的新闻链接不同，这种方式显然不妥当。但是，这种不足主要是采用的站群系统的功能导致，而且这个不足也不是完全不能容忍，事实上普通用户往往忽视了这个问题，因为他们往往只注重得到信息，并没有注意信息的链接，只有在极个别的情况下，如分享信息的时候才会觉察，但有些站群系统，如webplus，提供了两种链接自动转化功能。我校使用的站群系统就是webplus站群系统。

有些站群系统可以在为手机和pc提供不同模板的同时，能保证一篇新闻只有一个链接。如博达软件的站群系统、动易公司的站群系统等。其中博达软件的站群从表面上看（因为课题组时间有限，不可能对所有的站群进行深人的研究），提供了更好的方式，它使用静态网页生成技术的同时，在保证了一个信息只有一个链接的情况下，能向手机版用户、iPad用户、pc版用户提供不同的前台展示模板，这个站群系统利用了cookie技术、伪静态网页技术，很好的完成了这一功能。动易系统虽然有静态网站生成功能，他们并不赞成使用，他们会认为启用静态网页生成功能会导致系统复杂，这个观点有分部道理，他们一直致力于整个系统使用动态网站技术。动易系统如果启用了手机版网站必须使用动态技术，不能使用静态网页技术。启用静态网页技术除了考虑安全性之外，主要考虑的是访问速度问题，由于静态网页在服务端已经生成，用户访问时只是取得静态网页的过程，而动态网页技术导致用户每次访问链接，都要由服务器程序即时执行程序得到用户所需要的html流，然后发给用户，加重了服务器访的负担，由于访问页面时延较长些，会导致用户体验稍微不佳，但由于现在配置较好的服务器，运算速度较快，如果采用性能优良的服务器，这种时延也可以忽略。但是，一些采用静态网页技术的站群系统，把制作服务器和发布服务器分开，发布服务器暴露上互联网上，制作服务只在校内访问，这种模式的确加强了服务器的安全性，使制作服务器不容易受到黑客攻击。

2.2使用客户端自适应响应设计模式，只向用户推送一套模版和代码

此种模式主要使用了css3的媒体查询功能，服务器向客户端浏览器无差别推送相同的html流，html流到达客户端浏览器后，浏览器会根据css3的媒体查询指令、相关的js脚本以及自身浏览器的特性、设备特性，最终确定显示的模块和显示风格。这种方式有如下优点：1）只需要一套模板，维护时也只针对一套模板；2）由于只是浏览器根据相关指令调整显示效果，信息的链接一定是唯一的。缺点如下：1）前文數据已经分析，目前国内pc上的浏览还有相当一部分是低版本的ie，这部分低版本的ie并不支持css3的媒体查询功能，如果使用同一个模板，css3的媒体查询提供了关键的功能，虽然通过采用一些技术可以让这些低版本ie部分支持媒体查询，但毕竟不是浏览器原生支持，在运行中总会有很多问题出现；2）低版本ie浏览器对html5的支持度很低，而手机等智能触屏设备的浏览器对htm15支持良好，如果采用同一个模板，导致不得不采取就低原则，取消很多html5在手机等智能触屏设备上的功能，虽然可以通过技术进行兼容性判断，但增加了代码的复杂度，为以后维护网站埋下了隐患；3）如果使用同一个模板自适应各种终端，由于使用同一个版式进行自适应，这就导致手机网站和pc网站在版式上相同影响和迁就，版式设计风格更倾向于趋同，不利于向手机和pc推送差异化较大的版式；4）如果采用同一个版式，为了使版式在不同设备和分辨上有不同的展示效果，会导致编写的客户端代码较复杂，再加上一些兼容性的代码，导致以后修改网站版式变得困难；5）在使用媒体查询技术将手机版网站和pc端网站统一在一个模板之上，会导致浏览器加载无用的代码和资源，为适应pc和触屏设备，两个版式显示的模块的方式会有不同，在各种设备中各种模板极有可能被开启或者关闭显示，但这些模块的代码依然要被加载到客户端浏览器，虽然可以在服务器端根据客户端浏览器的状况发送不同的客户端代码，但由于高校的网站基本上都建立在成熟的站群系统之上，而站群系统一般不会在服务器端提供这种编程功能。

上述相当一部分缺点和不足，基本上都是国内台式计算机设备陈旧、安装的操作系统和浏览器版本过低造成的，在欧美一些发达国家，使用客户端响应模式较流行，国内相当一部分高校也采用了这种方式，但国内高校在采用这种方式的时候，基本都对低版本的ie浏览器作了兼容性的考虑，采用的方式有以下几种：1）当ie浏览器的版本等于或低于ie8时，没有响应效果，采用固定版式；2）针对pc端浏览器，均没有响应效果，只在手机、iPad等智能触屏终端上有响应式效果；3）对非ie浏览器采用响应式效果。

3.手机版网站发展前景

随着移动网络速度上传下载速率迅速提升，以及手机、iPad等智能终端设备性能的飞速提高，人类使用手机等智能移动设备接入互联网，处理工作、生活中事务将会是首先方式。虽然app功能强大，但基于浏览器的应用有一个优势——不需要安装。对于只展示、交互较少的互联网应用，网页形式将是首选。也许在将来，随着html5功能的日益完善，app和网页将会统一。但是，就目前来说，基于浏览器的应用，在展示信息方面还是不可取代的，这就导致必须要为占网站访问量最大的手机用户设计适合其设备特点的网页版式，提高其浏览体验。

就目前来，两种建设手机网站的模式将并存，因为这两种模式各有优缺点。为各种设备提供不同的版式，虽然在调整版式的时候，工作量大一些，但也避免了几种版式的相互影响，不至于改一处影响全部终端用户，事实上，如果使用客户端响应式，只提供一种版式，在调整版式时也不见得就轻松简单，因为任何代码的调整都要考虑到在几种设备的效果。

关于采用何种模式，要考虑以下因素：1）客户使用的台式计算机浏览器ie版本，如果是公司内网使用，浏览器版本高，可以考虑使用客户端响应式，只推送一套版式；2）网站规模，如果只是几个简单的展示页面，功能较少，可以考虑只推送一套版式；3）使用客户端响应式，其实版式一般为块状风格，并且手机版和pc版风格一般趋同。