手機(jī)WebAPP設(shè)計注意事項和解決方法(1)

2014-12-12 13:06:13來源:網(wǎng)絡(luò)轉(zhuǎn)載作者:

1. 基本手機(jī)網(wǎng)頁設(shè)計

1. 基本手機(jī)網(wǎng)頁設(shè)計

1.1 wap端的網(wǎng)站表頭

wap端的網(wǎng)站,寫的時候首先注意表頭,因為是手機(jī)端的,所以和我們平常用的web端頁面的不一樣,表頭為:

1.2 盡量少使用水平滾動。

水平滾動除了比較費時之外,用戶還將難以判斷他們在整個頁面中的位置。如果可能,設(shè)計的內(nèi)容不要寬于或長于目標(biāo)設(shè)備的顯示屏。盡量保證一行出現(xiàn)14個字符,或者用<br/>換行,或者設(shè)寬為100%,以便內(nèi)容會根據(jù)用戶手機(jī)屏幕的大小自適應(yīng)往下排。

1.3 避免過多使用文本強(qiáng)調(diào)屬性,如粗體,斜體和下劃線等,因為這降低了小顯示屏上內(nèi)容的可讀性。

1.4 盡量少用float。

 因為現(xiàn)行的手機(jī)的屏幕限制,沒有太多的空間去漂移,故提倡用靜態(tài)布局和盡量少的用float(ucweb6.0目前還不支持float)

1.5 為了手機(jī)的流量,提倡盡量少用背景圖

另外,有背景色的白字在部分手機(jī)上也是不支持的,故少用此效果

1.6 刪除代碼內(nèi)不必要的空白區(qū)和代碼內(nèi)的注釋

確保代碼內(nèi)沒多余的空白區(qū)非常重要。雖然空白區(qū)在屏幕上是不可見的。但然要被處理,因為瀏覽器要對空白區(qū)進(jìn)行分析、排版、css分配和顯示等。XHTML代碼內(nèi)注釋數(shù)量盡量減少,以使代碼盡可能地緊湊。

1.7 使用內(nèi)部樣式表。

一般而言,雖然使用外部樣式表無論如何都有可能把樣式從標(biāo)記語言中分離出來,這是一種好的方法,但應(yīng)注意權(quán)衡考慮。如果樣式定義包含在XHTML代碼中,則XHTML頁面的顯示就更快。

但是外部樣式表的使用提供一種在整個服務(wù)中更改樣式的便利方法。在整個服務(wù)器中應(yīng)該使用相同的外部樣式表已避免把多個樣式表下載到電話上。外部樣式表僅需下載一次并能夠保存在高速緩存器中。

所以我們盡量寫在xhtml里面,把一些相同的通用的建一個外部樣式表。這樣便于更快的打開手機(jī)頁面。

1.8 謹(jǐn)慎使用表格。

因為手機(jī)上盡量不讓用float布局,那我們?yōu)榱朔奖悴季,大部分都使用table來布局。

如果要用嵌套表格,當(dāng)明確指定子表格的寬度時。開發(fā)人員應(yīng)避免用子表格寬度的一定比例來指定其父表格的寬度。因為設(shè)備具有不同的屏幕尺寸,所以百分比不一定能夠表示相同數(shù)量的像素。所以我們在表格中要使用絕對寬度,注意必須確保表格的總寬度與所有列的寬度加上邊框和單元格間隔的總和是一樣的。

1.9 盡可能減少圖像數(shù)量和減小圖像容量大小。

頁面上的沒一幅圖像就產(chǎn)生一次獨立的來回。這反過來使整個頁面的現(xiàn)實速度減慢。因此建議在全部服務(wù)中各個頁面使用相同的圖像,那么一個特定的圖像只需下載一次且能夠保存到高速緩存器中。

1.10 定義圖片的高度和寬度屬性。

在標(biāo)記語言中明確地指定圖像的高度和寬度,以使瀏覽器為圖像預(yù)留適當(dāng)?shù)目臻g。這不影響XHTML頁面的完整下載和處理時間,但卻大打改善用戶的感受,因為在下載圖像之前用戶可瀏覽頁面。

例:<img src="images/001.gif" width="175" height="41"/>

1.11 網(wǎng)頁文檔使用擴(kuò)展名命名為 " .xhtml"

推薦命名為xhtml,按WAP2.0的規(guī)范標(biāo)準(zhǔn)寫成html/htm等也是可以的。但少數(shù)手機(jī)對html支持的不好。

1.12 使用WCSS還是CSS?

WCSS (WAP Cascading Style Sheet 或稱 WAP CSS)是移動版本的CSS樣式表。它是CSS2的一個子集,去掉了一些不適于移動互聯(lián)網(wǎng)特性的屬性,并加入一些具有WAP特性的擴(kuò)展(如-wap- input-format/-wap-input-required/display:-wap-marquee等)。需要留意的是,這些特殊的屬性擴(kuò)展 并不是很實用,所以在實際的項目開發(fā)當(dāng)中,不推薦使用WCSS特有的屬性。

1.13 網(wǎng)頁大小限制

建議低版本頁面不超過15k,高版本頁面不超過60k。

1.14 網(wǎng)頁之間的空隙。

網(wǎng)頁之間的空隙我們一般用空格表示,因為手機(jī)中不會說文字之間有太大的距離,所以一般用空格" "表示,或者margin和padding值也可以用,但最好不要超過10px。

1.15 避免空值屬性

 如果屬性值為空,在web頁面中是完全沒有問題的,但是在大部分手機(jī)網(wǎng)頁上會報錯。
 

關(guān)鍵詞:WebAPP