面向移动终端的蒙古文CMS的关键技术研究

李娟，包乌格德勒

（呼和浩特民族学院，呼和浩特　010051）

面向移动终端的蒙古文CMS的关键技术研究

李娟，包乌格德勒

（呼和浩特民族学院，呼和浩特010051）

2013年内蒙古自治区高等学校科学研究项目（No.NJZC13270）

0　引言

随着智能手机、平板电脑等移动终端的普及流行，移动互联应用开发越来越受到了人们的重视，通过移动终端浏览网页是其最基本的功能。开发面向移动终端的蒙古文内容管理系统（CMS）时，需要充分考虑移动终端设备的硬件特性和用户的浏览习惯，同时也要符合蒙古文的显示模式。

1　移动终端设备信息的获取方法

移动终端一般指手机或平板电脑，通常具有多种丰富的功能。随着移动终端技术的不断发展移动终端逐渐具备了较强的计算、存储和处理能力以及触摸屏、定位、视频摄像头等功能组件，拥有了智能操作系统和开放的软件平台[1]。目前流行的智能操作系统有iOS、Android、Windows Phone等。

想要了解移动终端设备的硬件特性，首先需要获取移动终端设备的信息，本系统采用WURFL技术获取移动终端设备信息。

1.1WUREL介绍

WURFL[2]（Wireless Universal Resource File，无线通用资源文件），是一个开源的设备描述库项目，由ScientiaMobile组织运行维护。通过WURFL能够知道移动终端的具体参数特性，例如显示的字符，推荐使用的标记语言，能否播放视频，操作系统的版本，支持图片的格式等[3]。

WURFL的设备描述库文件是一个XML文件，其中关于移动终端设备的信息都存储在〈device〉元素中，该元素包含了多个〈group〉元素，每个〈group〉元素分别描述了当前移动终端设备对某个特定功能的支持情况，它的〈capability〉子元素用来显示具体的设备信息。该文件一般命名为wurfl.xml。

常用的capability字段：

brand_name：移动终端品牌类型；

model_name：移动终端型号；

device_os：移动终端操作系统系统；

device_os_version：移动终端操作系统版本号；

mobile_browser：移动终端正在使用的浏览器类型；

mobile_browser_version：移动终端正在使用的浏览器的版本号；

resolution_height：移动终端屏幕高度（像素）；

resolution_width：移动终端屏幕宽度（像素）。

1.2WUREL工作原理

一般情况下，客户端（移动终端）将请求发送到服务器时，会把一个称作user-agent的字符串也一起发送到服务器，在该字符串中包含了移动终端的制造商、设备型号等信息，而如果是同一款设备一般都使用相同的user-agent字符串。所以，通过user-agent字符串可以检测出移动终端的制造商和型号，服务器首先从请求中获取该字符串，并从设备描述库文件（wurfl.xml）中匹配相应的设备，从而了解其具体的硬件特性。

1.3在Java中配置WUREL

从http://wurfl.sourceforge.net下载最新的WURFL类库，最新版本为1.6.3，并把jar文件复制到的项目的lib目录，把wurfl.zip文件复制到WEB-INF中。在web. xml中配置WURFLServletContextListener监听器，并在〈context-param〉中设置WURFL参数。

配置代码如下所示：

〈listener〉〈listener-class〉

net.sourceforge.wurfl.core.web.WURFLServletContextListener

〈/listener-class〉〈/listener〉

〈context-param〉

〈param-name〉wurfl〈/param-name〉

〈param-value〉/WEB-INF/wurfl.zip〈/param-value〉

〈/context-param〉

还需要在〈context-param〉中设置capability-filter（字段过滤器）参数，需要把一些强制字段设置在该参数中，设置代码如下所示：

〈context-param〉

〈param-name〉capability-filter〈/param-name〉〈param-value〉

device_os

device_os_version

resolution_height

resolution_width

model_name

brand_name

〈/param-value〉

〈/context-param〉

1.4使用getCapability（）方法获取移动终端设备信息

在程序中通过getAttribute（）方法获取WURFLEngine对象，并通过该对象的getDeviceForRequest（）方法获取设备类的对象device，再通过getCapability（）方法获取设备的详细信息。下面是用于获取屏幕宽度和高度的代码：

WURFLEngine engine=（WURFLEngine）

getServletContext（）.getAttribute（WURFLEngine.class. getName（））; Device device=engine.getDeviceForRequest（request）; String width=device.getCapability（"resolution_width"）; String height=device.getCapability（"resolution_height"）;

2　蒙古文网页的显示技术

在IE浏览器中可设置CSS3的writing-mode属性设置为tb-lr，可实现蒙古文的从上到下，从左到右显示，但是在其他类型的浏览器中需要设置为verticallr。在CSS中设置代码如下：

〈style〉

.zuoshu{

writing-mode:vertical-lr;/*支持Firefox浏览器*/

-webkit-writing-mode:vertical-lr;/*支持 Safari、Chrome、Opera浏览器*/

-ms-writing-mode:tb-lr;/*支持IE浏览器*/

}

〈/style〉

在HTML元素中，设置该样式后可实现内容的从上到下，从左到右显示，并支持 IE、Safari、Chrome、Opera、Firefox等主流浏览器，代码如下所示：

〈div class="zuoshu"〉在IE浏览器中可设置CSS3 的writing-mode属性设置为tb-lr，可实现蒙古文的从上到下，从左到右显示，但是在其他类型的浏览器中需要设置为vertical-lr。〈/div〉

在IE、Firefox、Chrome浏览器中的显示效果如图1、图2、图3所示。

3　页面自适应技术

由于蒙古文是竖排文字，所以包含蒙古文的HTML元素的高度不能大于移动终端的屏幕高度，否则浏览每一行文字都需要上下滚动屏幕，不符合用户的浏览习惯。为了能兼容各种移动终端设备，最好设计一种高度自适应的页面，使每一行都能完全显示，不需要每次都要滚动屏幕。

3.1使用viewport实现页面宽度自适应

viewport是Apple为了解决移动版 Safari的屏幕分辨率大小问题，专门定义的一个虚拟窗口[4]。对移动终端来说，该虚拟窗口就是浏览器中显示页面的那部分区域，设计者可以对viewport的窗口大小和缩放进行控制。在HTML5中，可以通过meta标签对viewport进行控制，代码如下所示：

〈meta name="viewport"content="width=device-width,ini-tial-scale=1.0,maximum-scale=1.0,user-scalable=no"〉

该meta标签中的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户对页面进行手动缩放。其中width用来设置viewport的宽度，device-width指设备的宽度；initial-scale用来设置viewport的初始缩放值；maximum-scale用来设置用户的最大缩放值；user-scalable用来设置是否允许用户进行缩放。

设置“width=device-width”后已经实现了页面宽度自适应，不会出现水平滚动条，但是可以出现垂直滚动条，从而实现页面内容的从上到下滚动浏览。

图1　IE浏览器效果　

图2　Firefox浏览器效果

图3　Chrome浏览器效果

3.2元素高度自适应技术

由于蒙古文的显示模式要求包含蒙古文的元素的高度也不能超过屏幕，所以也需要对元素的高度进行自适应，可以结合WURFL技术实现元素高度的自适应。

（1）先使用WURFL获取到屏幕的高度和宽度：

int widthPx=Integer.parseInt（device.getCapability（"resolution_width"））;

int heightPx=Integer.parseInt（device.getCapability（"resolution_height"））;

（2）再计算出页面的缩放比例：

double suofangbili=320.0/widthPx;

这里320是页面的宽度。

（3）计算元素高度：

int height=（int）（heightPx*suofangbili）-45;

这里45表示移动终端浏览器中地址栏和状态栏的高度值。

（4）设置元素高度：

〈div id="newdiv"style="height:〈%=height%〉Px;"〉其中newdiv元速是包含蒙古文的DIV元素。在iphone4s中显示效果如图4、图5所示。

图4　iPhone4s显示效果1

图5　iPhone4s显示效果2

采用以上方法后，在其他移动终端都能使元素的高度自适应屏幕。

4　结语

本文借助WURFL、CSS、viewport等技术，解决了面向移动终端的蒙古文CMS在设计网页时遇到的几个关键问题，包括移动终端设备信息的获取方法、蒙古文网页的显示以及页面高度和宽度自适应等。

[1]罗军舟,吴文甲,杨明.移动互联网：终端、网络与服务[J].计算机学报,2011,34（11）:2029-2051.

[2]WURFL官方网站[EB/OL].[2015].http://wurfl.sourceforge.net/.

[3]艾军.面向移动终端的Web内容适配研究[D].武汉:华中师范大学,2014.

[4]钱海军.基于HTML5移动Web页面开发技术研究[J].电脑与信息技术.2013,21（1）:50-52.

Mongolian；CMS；WURFL；Self-Adaption

Research on the Key Technology of Mongolian CMS Oriented Mobile Terminal

LI Juan，BAO Wugedele
（Hohhot Minzu College,Hohhot 010051）

李娟（1977-），女，内蒙古通辽人，硕士，副教授，研究方向为计算机应用、蒙古文信息处理

包乌格德勒（1979-），男，内蒙古兴安盟人，副教授，研究方向为计算语言学、蒙古文信息处理2015-12-31

2016-01-02

设计和实现面向移动终端的蒙古文内容管理系统（CMS），根据移动终端设备的硬件特性和用户的浏览习惯进行网页设计，同时要符合蒙古文的显示模式，所以需要解决以下几个关键问题：移动终端设备信息的获取方法、蒙古文网页的显示技术、页面自适应技术等。

蒙古文；CMS；WURFL；自适应

In order to design and implement Mongolian CMS Oriented Mobile Terminal,the webpage design must be based on the mobile terminal's hardware characteristic and the users'browsing habits as well as conforms to Mongolian language display patterns.Therefore it is important to solve following key problems:how to obtain the mobile terminal's equipment information,the Mongolian language webpage display technique and webpage self-adaption method,etc.