移动版网站构建方法探讨

南宁学院 危华明 卢志翔 林 宁

一、引言

伴随移动互联网技术的快速发展，各类移动设备得到广泛普及，智能手机用户的数量更是迅猛增长。据2018年第41次中国互联网络发展状况统计报告的数据显示，截至2017年12月，我国手机网民规模达7.53亿，网民中使用手机上网人群的占比由2016年的95.1%提升至97.5%。手机已成为人们从互联网获取信息的首要工具。

在手机网民迅猛增加的情势之下，几乎所有用户都希望能通过手机方便、快捷地访问网站。而传统网站的界面和风格都是针对PC端设计的，用户直接在移动设备上面使用，会出现诸多问题。传统网站在用户体验上，不能满足手机用户的需求。

二、智能手机浏览传统PC网站存在的问题

移动设备与PC在分辨率和屏幕显示方向上都有很大的区别，并且受网络和自身处理能力的限制，当用户使用手机浏览传统网站时，都会出现页面布局混乱、无用信息过多等现象，页面效果不尽如人意。主要的问题如下：

第一，由于智能手机的屏幕尺寸比PC屏幕小，用户使用智能手机直接访问传统网站，往往会因为屏幕尺寸不足而页面变形。即使页面不变形，智能手机上显示的效果也是PC页面的缩小版，过小的文字、图片等页面元素，不利于用户浏览。

第二，对于用户操作比较多的功能性网站，传统的PC操作便利，不会给用户带来困扰。如果直接在手机上使用此类网站，缩小的功能按钮和虚拟键盘给用户操作带来极大的不便，用户体验大大降低。

第三，PC是通过有线网络来访问网上资源的，其技术已经十分成熟，不会受流量与速度的限制。为了追求更高的用户体验，传统PC页面上会使用大量的网页特效，再加上广告等信息，页面数据量一般都比较大。而智能手机则通过无线网络来访问网上资源，并且智能手机终端的处理能力远不如PC，受到无线网络和智能手机自身处理能力的限制，使用智能手机直接访问传统PC网站，会出现下载速度慢和产生大量流量资费等问题。

在Web应用得到广泛应用的今天，考虑到移动互联网的个性与特点，如何将传统PC网站构建为顺应移动互联网发展趋势，适用于各种智能移动终端的网站，成为了大家极为关注的焦点。

三、将传统PC网站构建为移动版网站的方法

针对以上问题，将传统PC网站构建为兼容各种智能终端的移动版网站已是大势所趋。目前，具体的实现方法主要有以下三种：

（一）页面重建

该方法是在原有PC站点的基础之上，通过组织团队或寻找软件开发公司，针对智能移动终端的特点，开发移动版网站，形成PC站点+移动站点的结构。用户浏览网站时，根据自身使用的客户端设备类型，来选择对应的网站版本。此方法可以根据不同的客户端而量身定制满足客户需求的站点，可以最大程度的提高用户体验，但这种方式存在开发成本和维护成本高等缺点。

（二）利用百度Site App工具

此方法借助第三方工具百度Site App，通过该工具快速将传统PC网站构建为移动版网站。具体实现过程如下：

（1）通过输入官方地址http：//siteapp.baidu.com,打开在线工具Site App，并在其中输入想要构建为手机网站的PC网站地址；

（2）选择目标网站的样式；

（3）通过添加或者自动抓取等方式，设置目标网站的导航；

（4）根据需要，添加电话、邮箱、版权等相关组件；

（5）下载验证文件，上传至网站根目录进行网站验证；

（6）绑定域名，配置dns即可。

Site App工具对于复杂脚本的处理能力有限，并且对网站交互功能的转换效果比较差，因此它比较适合于构建以文字阅读为主的网站。

（三）响应式网站

响应式网站也称之为自适应网站，它能够兼容各种客户终端。也就是说，采用这种方法，只需开发一个网站，便可提供给所有的设备使用，无需考虑屏幕尺寸不一的问题。将PC网站构建为响应式网站，既要保留其原有的PC端浏览效果，又要使其兼容不同类型的智能终端设备，所以只能在保持原有网站结构的前提下，通过新建样式表来满足智能终端的浏览需求。具体实现过程如下：

（1）分析网站，删减冗余内容。根据移动终端设备受网络和屏幕尺寸限制的特点，其浏览的网页应是最精简的。这就要求我们对原有PC网站进行分析，舍弃页面中起修饰修饰作用，以及次要的内容，保留页面的核心内容。

（2）编写适合于移动终端显示的样式表。精简网站的内容之后，即可编写适合移动终端浏览的CSS样式表。编写时需注意两个要点：其一，对于舍弃的内容，可通过display：none属性值对进行设置，将其隐藏掉；其二，用于布局的div模块，宽度都使用百分比进行设置，实现自适应宽度的流体布局。

（3）根据客户端屏幕尺寸大小，自动应用样式表。在网页页头中的link标签，使用CSS3的media query设置功能，让页面能根据不同设备屏幕尺寸，自动加载对应的样式表。

响应式网站通过使用流体布局、媒体查询等技术制作网页，使得网页能够自适应不同的终端设备。它是目前构建兼容PC和智能移动设备网站的最佳方案，也是Web设计的趋势。

四、结束语

传统PC网站是互联网上的一大资源，智能手机的广泛普及使得这一资源受到极大的挑战。为避免造成这一资源的浪费，以及减少企事业单位开发和维护网站的成本，研究如何将传统PC网站构建为适应移动互联网技术发展需求的移动版网站，具有重要意义。

[1]黄海玲.HTML5Web技术下的APP快速开发分析[J].无线互联科技,2016(8):59-62.

[2]陈念.电子商务网站重构策划的策略研究——以用户为中心的设计理念[J].中国商贸,2012(15):103-104.