面向移動(dòng)終端的蒙古文CMS的關(guān)鍵技術(shù)研究

李娟，包烏格德勒

（呼和浩特民族學(xué)院，呼和浩特　010051）

面向移動(dòng)終端的蒙古文CMS的關(guān)鍵技術(shù)研究

李娟，包烏格德勒

（呼和浩特民族學(xué)院，呼和浩特010051）

2013年內(nèi)蒙古自治區(qū)高等學(xué)校科學(xué)研究項(xiàng)目（No.NJZC13270）

0　引言

隨著智能手機(jī)、平板電腦等移動(dòng)終端的普及流行，移動(dòng)互聯(lián)應(yīng)用開(kāi)發(fā)越來(lái)越受到了人們的重視，通過(guò)移動(dòng)終端瀏覽網(wǎng)頁(yè)是其最基本的功能。開(kāi)發(fā)面向移動(dòng)終端的蒙古文內(nèi)容管理系統(tǒng)（CMS）時(shí)，需要充分考慮移動(dòng)終端設(shè)備的硬件特性和用戶(hù)的瀏覽習(xí)慣，同時(shí)也要符合蒙古文的顯示模式。

1　移動(dòng)終端設(shè)備信息的獲取方法

移動(dòng)終端一般指手機(jī)或平板電腦，通常具有多種豐富的功能。隨著移動(dòng)終端技術(shù)的不斷發(fā)展移動(dòng)終端逐漸具備了較強(qiáng)的計(jì)算、存儲(chǔ)和處理能力以及觸摸屏、定位、視頻攝像頭等功能組件，擁有了智能操作系統(tǒng)和開(kāi)放的軟件平臺(tái)[1]。目前流行的智能操作系統(tǒng)有iOS、Android、Windows Phone等。

想要了解移動(dòng)終端設(shè)備的硬件特性，首先需要獲取移動(dòng)終端設(shè)備的信息，本系統(tǒng)采用WURFL技術(shù)獲取移動(dòng)終端設(shè)備信息。

1.1WUREL介紹

WURFL[2]（Wireless Universal Resource File，無(wú)線通用資源文件），是一個(gè)開(kāi)源的設(shè)備描述庫(kù)項(xiàng)目，由ScientiaMobile組織運(yùn)行維護(hù)。通過(guò)WURFL能夠知道移動(dòng)終端的具體參數(shù)特性，例如顯示的字符，推薦使用的標(biāo)記語(yǔ)言，能否播放視頻，操作系統(tǒng)的版本，支持圖片的格式等[3]。

WURFL的設(shè)備描述庫(kù)文件是一個(gè)XML文件，其中關(guān)于移動(dòng)終端設(shè)備的信息都存儲(chǔ)在〈device〉元素中，該元素包含了多個(gè)〈group〉元素，每個(gè)〈group〉元素分別描述了當(dāng)前移動(dòng)終端設(shè)備對(duì)某個(gè)特定功能的支持情況，它的〈capability〉子元素用來(lái)顯示具體的設(shè)備信息。該文件一般命名為wurfl.xml。

常用的capability字段：

brand_name：移動(dòng)終端品牌類(lèi)型；

model_name：移動(dòng)終端型號(hào)；

device_os：移動(dòng)終端操作系統(tǒng)系統(tǒng)；

device_os_version：移動(dòng)終端操作系統(tǒng)版本號(hào)；

mobile_browser：移動(dòng)終端正在使用的瀏覽器類(lèi)型；

mobile_browser_version：移動(dòng)終端正在使用的瀏覽器的版本號(hào)；

resolution_height：移動(dòng)終端屏幕高度（像素）；

resolution_width：移動(dòng)終端屏幕寬度（像素）。

1.2WUREL工作原理

一般情況下，客戶(hù)端（移動(dòng)終端）將請(qǐng)求發(fā)送到服務(wù)器時(shí)，會(huì)把一個(gè)稱(chēng)作user-agent的字符串也一起發(fā)送到服務(wù)器，在該字符串中包含了移動(dòng)終端的制造商、設(shè)備型號(hào)等信息，而如果是同一款設(shè)備一般都使用相同的user-agent字符串。所以，通過(guò)user-agent字符串可以檢測(cè)出移動(dòng)終端的制造商和型號(hào)，服務(wù)器首先從請(qǐng)求中獲取該字符串，并從設(shè)備描述庫(kù)文件（wurfl.xml）中匹配相應(yīng)的設(shè)備，從而了解其具體的硬件特性。

1.3在Java中配置WUREL

從http://wurfl.sourceforge.net下載最新的WURFL類(lèi)庫(kù)，最新版本為1.6.3，并把jar文件復(fù)制到的項(xiàng)目的lib目錄，把wurfl.zip文件復(fù)制到WEB-INF中。在web. xml中配置WURFLServletContextListener監(jiān)聽(tīng)器，并在〈context-param〉中設(shè)置WURFL參數(shù)。

配置代碼如下所示：

〈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〉中設(shè)置capability-filter（字段過(guò)濾器）參數(shù)，需要把一些強(qiáng)制字段設(shè)置在該參數(shù)中，設(shè)置代碼如下所示：

〈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（）方法獲取移動(dòng)終端設(shè)備信息

在程序中通過(guò)getAttribute（）方法獲取WURFLEngine對(duì)象，并通過(guò)該對(duì)象的getDeviceForRequest（）方法獲取設(shè)備類(lèi)的對(duì)象device，再通過(guò)getCapability（）方法獲取設(shè)備的詳細(xì)信息。下面是用于獲取屏幕寬度和高度的代碼：

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　蒙古文網(wǎng)頁(yè)的顯示技術(shù)

在IE瀏覽器中可設(shè)置CSS3的writing-mode屬性設(shè)置為tb-lr，可實(shí)現(xiàn)蒙古文的從上到下，從左到右顯示，但是在其他類(lèi)型的瀏覽器中需要設(shè)置為verticallr。在CSS中設(shè)置代碼如下：

〈style〉

.zuoshu{

writing-mode:vertical-lr;/*支持Firefox瀏覽器*/

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

-ms-writing-mode:tb-lr;/*支持IE瀏覽器*/

}

〈/style〉

在HTML元素中，設(shè)置該樣式后可實(shí)現(xiàn)內(nèi)容的從上到下，從左到右顯示，并支持 IE、Safari、Chrome、Opera、Firefox等主流瀏覽器，代碼如下所示：

〈div class="zuoshu"〉在IE瀏覽器中可設(shè)置CSS3 的writing-mode屬性設(shè)置為tb-lr，可實(shí)現(xiàn)蒙古文的從上到下，從左到右顯示，但是在其他類(lèi)型的瀏覽器中需要設(shè)置為vertical-lr。〈/div〉

在IE、Firefox、Chrome瀏覽器中的顯示效果如圖1、圖2、圖3所示。

3　頁(yè)面自適應(yīng)技術(shù)

由于蒙古文是豎排文字，所以包含蒙古文的HTML元素的高度不能大于移動(dòng)終端的屏幕高度，否則瀏覽每一行文字都需要上下滾動(dòng)屏幕，不符合用戶(hù)的瀏覽習(xí)慣。為了能兼容各種移動(dòng)終端設(shè)備，最好設(shè)計(jì)一種高度自適應(yīng)的頁(yè)面，使每一行都能完全顯示，不需要每次都要滾動(dòng)屏幕。

3.1使用viewport實(shí)現(xiàn)頁(yè)面寬度自適應(yīng)

viewport是Apple為了解決移動(dòng)版 Safari的屏幕分辨率大小問(wèn)題，專(zhuān)門(mén)定義的一個(gè)虛擬窗口[4]。對(duì)移動(dòng)終端來(lái)說(shuō)，該虛擬窗口就是瀏覽器中顯示頁(yè)面的那部分區(qū)域，設(shè)計(jì)者可以對(duì)viewport的窗口大小和縮放進(jìn)行控制。在HTML5中，可以通過(guò)meta標(biāo)簽對(duì)viewport進(jìn)行控制，代碼如下所示：

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

該meta標(biāo)簽中的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶(hù)對(duì)頁(yè)面進(jìn)行手動(dòng)縮放。其中width用來(lái)設(shè)置viewport的寬度，device-width指設(shè)備的寬度；initial-scale用來(lái)設(shè)置viewport的初始縮放值；maximum-scale用來(lái)設(shè)置用戶(hù)的最大縮放值；user-scalable用來(lái)設(shè)置是否允許用戶(hù)進(jìn)行縮放。

設(shè)置“width=device-width”后已經(jīng)實(shí)現(xiàn)了頁(yè)面寬度自適應(yīng)，不會(huì)出現(xiàn)水平滾動(dòng)條，但是可以出現(xiàn)垂直滾動(dòng)條，從而實(shí)現(xiàn)頁(yè)面內(nèi)容的從上到下滾動(dòng)瀏覽。

圖1　IE瀏覽器效果　

圖2　Firefox瀏覽器效果

圖3　Chrome瀏覽器效果

3.2元素高度自適應(yīng)技術(shù)

由于蒙古文的顯示模式要求包含蒙古文的元素的高度也不能超過(guò)屏幕，所以也需要對(duì)元素的高度進(jìn)行自適應(yīng)，可以結(jié)合WURFL技術(shù)實(shí)現(xiàn)元素高度的自適應(yīng)。

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

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

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

（2）再計(jì)算出頁(yè)面的縮放比例：

double suofangbili=320.0/widthPx;

這里320是頁(yè)面的寬度。

（3）計(jì)算元素高度：

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

這里45表示移動(dòng)終端瀏覽器中地址欄和狀態(tài)欄的高度值。

（4）設(shè)置元素高度：

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

圖4　iPhone4s顯示效果1

圖5　iPhone4s顯示效果2

采用以上方法后，在其他移動(dòng)終端都能使元素的高度自適應(yīng)屏幕。

4　結(jié)語(yǔ)

本文借助WURFL、CSS、viewport等技術(shù)，解決了面向移動(dòng)終端的蒙古文CMS在設(shè)計(jì)網(wǎng)頁(yè)時(shí)遇到的幾個(gè)關(guān)鍵問(wèn)題，包括移動(dòng)終端設(shè)備信息的獲取方法、蒙古文網(wǎng)頁(yè)的顯示以及頁(yè)面高度和寬度自適應(yīng)等。

[1]羅軍舟,吳文甲,楊明.移動(dòng)互聯(lián)網(wǎng)：終端、網(wǎng)絡(luò)與服務(wù)[J].計(jì)算機(jī)學(xué)報(bào),2011,34（11）:2029-2051.

[2]WURFL官方網(wǎng)站[EB/OL].[2015].http://wurfl.sourceforge.net/.

[3]艾軍.面向移動(dòng)終端的Web內(nèi)容適配研究[D].武漢:華中師范大學(xué),2014.

[4]錢(qián)海軍.基于HTML5移動(dòng)Web頁(yè)面開(kāi)發(fā)技術(shù)研究[J].電腦與信息技術(shù).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-），女，內(nèi)蒙古通遼人，碩士，副教授，研究方向?yàn)橛?jì)算機(jī)應(yīng)用、蒙古文信息處理

包烏格德勒（1979-），男，內(nèi)蒙古興安盟人，副教授，研究方向?yàn)橛?jì)算語(yǔ)言學(xué)、蒙古文信息處理2015-12-31

2016-01-02

設(shè)計(jì)和實(shí)現(xiàn)面向移動(dòng)終端的蒙古文內(nèi)容管理系統(tǒng)（CMS），根據(jù)移動(dòng)終端設(shè)備的硬件特性和用戶(hù)的瀏覽習(xí)慣進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，同時(shí)要符合蒙古文的顯示模式，所以需要解決以下幾個(gè)關(guān)鍵問(wèn)題：移動(dòng)終端設(shè)備信息的獲取方法、蒙古文網(wǎng)頁(yè)的顯示技術(shù)、頁(yè)面自適應(yīng)技術(shù)等。

蒙古文；CMS；WURFL；自適應(yīng)

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.