李娟，包烏格德勒

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

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

李娟，包烏格德勒

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

2013年內(nèi)蒙古自治區(qū)高等學(xué)?？茖W(xué)研究項目（No.NJZC13270）

0　引言

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

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

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

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

1.1WUREL介紹

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

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

常用的capability字段：

brand_name：移動終端品牌類型；

model_name：移動終端型號；

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

device_os_version：移動終端操作系統(tǒng)版本號；

mobile_browser：移動終端正在使用的瀏覽器類型；

mobile_browser_version：移動終端正在使用的瀏覽器的版本號；

resolution_height：移動終端屏幕高度（像素）；

resolution_width：移動終端屏幕寬度（像素）。

1.2WUREL工作原理

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

1.3在Java中配置WUREL

從http://wurfl.sourceforge.net下載最新的WURFL類庫，最新版本為1.6.3，并把jar文件復(fù)制到的項目的lib目錄，把wurfl.zip文件復(fù)制到WEB-INF中。在web. xml中配置WURFLServletContextListener監(jiān)聽器，并在〈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（字段過濾器）參數(shù)，需要把一些強制字段設(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（）方法獲取移動終端設(shè)備信息

在程序中通過getAttribute（）方法獲取WURFLEngine對象，并通過該對象的getDeviceForRequest（）方法獲取設(shè)備類的對象device，再通過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)頁的顯示技術(shù)

在IE瀏覽器中可設(shè)置CSS3的writing-mode屬性設(shè)置為tb-lr，可實現(xiàn)蒙古文的從上到下，從左到右顯示，但是在其他類型的瀏覽器中需要設(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è)置該樣式后可實現(xiàn)內(nèi)容的從上到下，從左到右顯示，并支持 IE、Safari、Chrome、Opera、Firefox等主流瀏覽器，代碼如下所示：

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

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

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

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

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

viewport是Apple為了解決移動版 Safari的屏幕分辨率大小問題，專門定義的一個虛擬窗口[4]。對移動終端來說，該虛擬窗口就是瀏覽器中顯示頁面的那部分區(qū)域，設(shè)計者可以對viewport的窗口大小和縮放進(jìn)行控制。在HTML5中，可以通過meta標(biāo)簽對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è)備的寬度，同時不允許用戶對頁面進(jìn)行手動縮放。其中width用來設(shè)置viewport的寬度，device-width指設(shè)備的寬度；initial-scale用來設(shè)置viewport的初始縮放值；maximum-scale用來設(shè)置用戶的最大縮放值；user-scalable用來設(shè)置是否允許用戶進(jìn)行縮放。

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

圖1　IE瀏覽器效果　

圖2　Firefox瀏覽器效果

圖3　Chrome瀏覽器效果

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

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

（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表示移動終端瀏覽器中地址欄和狀態(tài)欄的高度值。

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

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

圖4　iPhone4s顯示效果1

圖5　iPhone4s顯示效果2

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

4　結(jié)語

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

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

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

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

[4]錢海軍.基于HTML5移動Web頁面開發(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īng)用、蒙古文信息處理

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

2016-01-02

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