面向移動終端的蒙古文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.