如果你正準(zhǔn)備為你的網(wǎng)站制作一個移動設(shè)備版本，那這篇文章將會對你相當(dāng)有用，在本文中，將探索移動Web網(wǎng)頁編碼設(shè)計的各種技巧和注意事項(xiàng)：

• 為了移動設(shè)備上的用戶體驗(yàn)可以被接受，代碼得怎么設(shè)計。
• Mobile Web與普通網(wǎng)站的不同之處？
• 可以讓網(wǎng)站成功運(yùn)行在移動設(shè)備和桌面瀏覽器上的基本技巧
• 一些Mobile Web設(shè)計中的建議和禁忌、以及大量資源

　　Mobile Web和普通網(wǎng)站到底有何不同呢？

　　這是個很好的問題 首先，也許我們應(yīng)該從什么是Mobile Web的問題開始。畢竟，用戶用移動設(shè)備訪問的Mobile Web，跟他們在家里用臺式機(jī)訪問的網(wǎng)站是獨(dú)立的不同的部分。當(dāng)我說Mobile Web時，我指的是通過移動設(shè)備訪問的網(wǎng)站。

　　在Opera，我們?nèi)硇耐度攵鴦?chuàng)造出的瀏覽器允許你查看整個網(wǎng)絡(luò)，不管瀏覽設(shè)備是否有這個能力。只要你在建立網(wǎng)站時，付出一點(diǎn)兒細(xì)心、尊敬并遵循 Web標(biāo)準(zhǔn)，你就可以為所有人所有設(shè)備創(chuàng)建只有一個版本的網(wǎng)站 唯一的一個網(wǎng)站。但是，有一些例外情況 在某些情況下，只有分版本的網(wǎng)站才行得通，一會你會看到這一點(diǎn)。

　　移動領(lǐng)域的競爭環(huán)境并不平衡

　　在桌面領(lǐng)域，對于我們前端開發(fā)者來說，形式正在好轉(zhuǎn) 大多數(shù)現(xiàn)代瀏覽器已經(jīng)對Web標(biāo)準(zhǔn)支持的非常好了，無論是Opera、firefox（以及其他Gecko內(nèi)核瀏覽器）或者Safari（以及其他 Webkit內(nèi)核瀏覽器），甚至IE帶給我們的痛苦都比原來少了。雖然IE6的用戶群體數(shù)量仍然非常杯具，但這應(yīng)該歸結(jié)于大多數(shù)人封閉的使用習(xí)慣等因素。 但是，移動設(shè)備領(lǐng)域在這方面卻是不同尋常的：

• 你擁有能為Full Web提供支持的瀏覽器，像iphone上的Opera Mobile和Safari。Opera Mobile使用了與桌面版本相同的渲染引擎，所以對標(biāo)準(zhǔn)的支持相差無幾。
• 你擁有并不很爽的瀏覽器，例如IE，它們對Web標(biāo)準(zhǔn)僅能提供有限的支持。它們中的一部分只支持WAP（例如WinWap），另一些支持其他像 Chtml或HTML-MP這樣的標(biāo)準(zhǔn)（例如日本NTT DoCoMo的iMode瀏覽器），還有一些只支持Web標(biāo)準(zhǔn)中的有限子集（例如NETfront、Pocket IE、以及Blazer）。
• 最后，你擁有OperaMini， 以及其他通過代理機(jī)制的瀏覽器。它主要只是作為連接用戶和一個大服務(wù)器群的客戶端界面。當(dāng)用戶提交一個URL時，客戶端會讓服務(wù)端查找這個頁面。然后它會 把頁面轉(zhuǎn)換成一個輕量級的二進(jìn)制標(biāo)記語言，將它格式化成適合移動設(shè)備查看的形式，并發(fā)送回客戶端顯示。這種方式的最主要優(yōu)勢，是可以使頁面體積減少90% 左右，幫助用戶節(jié)省很多帶寬費(fèi)用。這種標(biāo)記語言表明Web標(biāo)準(zhǔn)并不能很好的表現(xiàn)在移動設(shè)備上，因?yàn)樵谶@種服務(wù)的方式下，OperaMini對 ajax/Javascript某些方面將支持的不是很好 在這兒有更詳細(xì)的解釋。

　　注意：不要指望你的超級Ajax和DOM腳本動畫網(wǎng)站在移動設(shè)備上會有良好表現(xiàn)。JavaScript在移動設(shè)備上的支持程度千差萬別。時刻提供優(yōu)雅降級吧。這種做法有一個例子叫做Hijax。

　　我們可以看到，在移動設(shè)備的跨瀏覽器兼容方面，你要思考的問題有很多。但是不要怕 我隨后的建議會給你指引一個正確的方向；并且隨著時間的推移，移動瀏覽器對標(biāo)準(zhǔn)的支持將會得到改善，屆時我們前端開發(fā)者真的再也不需要為它們操心了。你問 我這一切什么時候會實(shí)現(xiàn)？Who knows！

　　移動瀏覽器的其它限制還有那些？

　　當(dāng)然，在移動設(shè)備上開發(fā)網(wǎng)站時，除了瀏覽器對標(biāo)準(zhǔn)的支持外，還會遇到其它更多的限制因素。設(shè)備自身的限制因素，你也不得不考慮。例如：

• 有限的控制 不要只假設(shè)你的用戶會使用鼠標(biāo)來控制頁面中的一切，你也要提供鍵盤的選擇。一些手機(jī)用戶可能沒有類似鼠標(biāo)這樣的東東，所以類似這樣的結(jié)構(gòu) :hover 以及 onClick 對 他們來說是沒有用的（這對可用性方面也是非常重要的 一些殘障用戶可能在用手方面會有些缺陷）。為用戶提供的表單設(shè)計也同樣重要 你可能已經(jīng)感受到，用手機(jī)來填寫那些又臭又長的必填表單有多么不爽。為了解決這個問題，試著去把那一坨內(nèi)容用下拉菜單的方式展現(xiàn)出來，這比等著用戶一個字 一個字手動輸入來的更靠譜（譯者注：目前國內(nèi)有某些山寨機(jī)瀏覽器對下拉菜單的支持可能有不同程度的問題。例如基于MTK系統(tǒng)的聯(lián)想i61，默認(rèn)情況下會顯示所有選項(xiàng)，而在某些情況下會產(chǎn)生變形和漂移，使用時需要謹(jǐn)慎些）。另外，給表單設(shè)置一個最有可能的初始值，也是一個好主意。
• 有限的屏幕尺寸 想象一下你那美妙的1024×768的設(shè)計在240×320屏幕下，或者更小的屏幕下，它的可用性會是什么樣子……有一些方法可以應(yīng)對這個情況 你可以故意把頁面設(shè)計的很簡潔流暢，或者你可以通過采取功能檢測或媒體類型檢測（諸如此類）的手段，為移動設(shè)備提供不同的頁面。另外對于屏幕尺寸，有些手 機(jī)可能不需要這么麻煩，它們可能會提供縮放模式這樣的機(jī)制，但是你卻不能保證這一點(diǎn)。
• 有限的內(nèi)存和帶寬 移動設(shè)備所提供的可用內(nèi)存明顯比臺式機(jī)少得多。因此，在你設(shè)計站點(diǎn)時，需要特別小心的考慮那些超大容量的相冊圖片，以及交互式流媒體視頻的應(yīng)用程序。此外，一些移動瀏覽器提供了關(guān)閉圖像顯示的選項(xiàng)，但是你也同樣不能確定這一點(diǎn)。
• 有限的排版 我靠，你對臺式機(jī)上那些排版非常癡情？你沒有看到移動設(shè)備上的表現(xiàn)！雖然這條規(guī)則有很多例外情況，但大多數(shù)移動設(shè)備對字體的選擇非常有限，只有一兩種（like 1 or 2）。這個限制是由系統(tǒng)或?yàn)g覽器決定的。
• 有限的顏色 一些移動設(shè)備在顏色方面的支持也非常有限?？紤]你有多少頁面的體驗(yàn)需要依賴于顏色，并確認(rèn)那些對比色在移動設(shè)備上仍然支持。

　　這些限制因素，就是導(dǎo)致Mobile Web的體驗(yàn)與PC Web的體驗(yàn)不同之處的真正原因。千萬別欺騙自己，覺得自己的網(wǎng)站在移動設(shè)備上的用戶體驗(yàn)與臺式機(jī)上會保持一致 這純屬YY。當(dāng)然，你拋開瀏覽器，千方百計去確認(rèn)用戶體驗(yàn)這一點(diǎn)仍然值得肯定。

　　真正的辦法，去確保你的網(wǎng)站為移動用戶提供一個良好的體驗(yàn)，是測試，測試，再測試！一些Web設(shè)計師們已經(jīng)認(rèn)識到，除了他們自己的手機(jī)、臺式機(jī)以及游戲機(jī)瀏覽器外，還需要有一大堆移動設(shè)備需要準(zhǔn)備在手頭。

　　解決問題的不同方法

　　人們普遍意識到，有三種辦法可以解決移動開發(fā)的問題（已經(jīng)被Cameron Moll證實(shí)了）?？赡艿脑?，我建議你試試這三種方式 如前所述，在Opera，我們堅持相信One Web的理念 但是剛才我也說過，有些情況下這是很難實(shí)現(xiàn)的，或者也是沒有必要的。下面是這三種方法：

1. 務(wù)必堅持遵循Web標(biāo)準(zhǔn)
2. 創(chuàng)建一個完全獨(dú)立的移動網(wǎng)站
3. 只創(chuàng)建一個站點(diǎn)(One Web)，但是根據(jù)瀏覽它的設(shè)備和瀏覽器情況，添加優(yōu)化代碼。

　　現(xiàn)在，讓我們開始對這些點(diǎn)逐個講解。

　　堅持遵循Web標(biāo)準(zhǔn)和最佳實(shí)踐

　　一個好網(wǎng)站的基礎(chǔ)，是要有一個好的HTML結(jié)構(gòu)，以及美妙的CSS（表現(xiàn)）和JavaScript（行為）。如果你認(rèn)真地遵循Web標(biāo)準(zhǔn)，大多數(shù)移動瀏覽器至少會很好地解析并至少會基本可用，這是非常有可能的。例如：

• 一個網(wǎng)站，有良好的HTML結(jié)構(gòu)順序并在HTML中沒有裝飾性圖片，在移動瀏覽器的單列模式或移動模式中，會呈現(xiàn)得很有邏輯性。
• 如果你的表單元素中含有label元素，瀏覽器將把它渲染得更有表單區(qū)域的感覺。
• 如果你給CSS和JavaScript使用了優(yōu)雅降級/漸進(jìn)增強(qiáng)技術(shù)，瀏覽器如果不支持、簡化、忽略某些屬性，這時站點(diǎn)的可用性幾率會大大增加。

　　如果你花費(fèi)時間精力去研究的話，在提升移動用戶體驗(yàn)方面，還有更多事情可以去做。如果你的目標(biāo)受眾包括大量使用非HTML瀏覽器（例如支持WAP或CHTML的某些日本瀏覽器）用戶，那么你可能不得不檢測設(shè)備并提供適當(dāng)?shù)膬?nèi)容。

　　提供一個完全獨(dú)立的移動網(wǎng)站

　　如前所述，我認(rèn)為如果可能的話應(yīng)該盡量避免使用這種方式。你可以做設(shè)備檢測并自動重定向來避免給用戶使用帶來麻煩，但是這意味著你不得不維護(hù)兩套網(wǎng)站。最主要的方法是通過UA嗅探來識別瀏覽器，或在服務(wù)端進(jìn)行設(shè)備功能檢測，然后再給用戶提供相應(yīng)的站點(diǎn)。在dev.opera.com，有很多優(yōu)秀的文章來講述如何實(shí)現(xiàn) 查看最后的資源部分。

　　但也有例外，對于完全獨(dú)立的網(wǎng)站來講 你不得不始終考慮用戶體驗(yàn)情況。某些類型的瀏覽設(shè)備可能不兼容于特定的網(wǎng)站或者特定的功能。例如，有一個大學(xué)校園網(wǎng)，帶有部門電話號碼的搜索功能，但同時 也包含了一大堆校園歷史的網(wǎng)頁。如果你想去與某人會面卻找不到他們部門時，你大概會想在移動設(shè)備上使用搜索功能，但你在外出的時候也不太可能想坐下來閱讀 那么多的文字。

　　在這種情況下，你可以使用下面提到的一些技巧，來為移動設(shè)備提供網(wǎng)站中某個功能的一部分，或者干脆為移動設(shè)備創(chuàng)建一套完全獨(dú)立的網(wǎng)站。你只需檢測用 戶使用的設(shè)備類型并自動提供給他相應(yīng)的站點(diǎn)，并把這個過程完全公開給用戶，但是很多很多人并不愿意這個功能把他們完全限制住，所以如果你要這么做的話，就 需要給用戶提供一個指向完整站點(diǎn)的鏈接，用戶可以自行選擇是否用它來訪問完整站點(diǎn)。

　　一句話警告 設(shè)備檢測很容易被濫用。你可能經(jīng)常看到一個網(wǎng)站的桌面版本非常牛B，而它的移動站點(diǎn)卻非常的垃圾。因?yàn)殚_發(fā)者只是將移動站點(diǎn)放在一個非常低標(biāo)準(zhǔn)的位置上。 事實(shí)上，目標(biāo)受眾的設(shè)備水平并不均衡，現(xiàn)在很多的移動瀏覽器都具有處理完整Web頁面的能力了！你應(yīng)該盡可能地讓設(shè)備發(fā)揮他們最高的處理能力，并且要發(fā)揮 移動設(shè)備的特別優(yōu)勢，比如基于位置的服務(wù)（LBS），還有 tel: 協(xié)議 在超鏈接點(diǎn)擊時它可以讓設(shè)備撥打一個電話號碼。

　　只提供一個網(wǎng)站(One Web)

　　進(jìn)行到這里時，就開始變得有趣了。你可以再次依靠服務(wù)端功能檢測，但這次是在單一網(wǎng)站的基礎(chǔ)上進(jìn)行優(yōu)化，而不是重定向到另一個獨(dú)立網(wǎng)站。有一些手機(jī)所支持功能的數(shù)據(jù)庫可以參考，例如WURFL。它是以XML文件的形式開放的，你可以在設(shè)計優(yōu)化內(nèi)容之前，先通過它來查詢設(shè)備所支持的功能。你還可以查詢移動設(shè)備的UA字符串，找出這些設(shè)備的其他細(xì)節(jié)參數(shù)，例如是否有攝像頭，屏幕尺寸是多少，以及它的語言種類等信息。

　　在客戶端，你已經(jīng)得到了為移動設(shè)備而優(yōu)化內(nèi)容所需的兩個條件 媒體類型（media types）和媒體查詢（media queries）。

　　媒體類型(media types)

　　就像你知道的那樣，你可以指定不同的CSS來實(shí)現(xiàn)不同的用途，例如：

<link href="main.css" type="text/css" media="screen" rel="stylesheet">
<link href="print.css" type="text/css" media="print" rel="stylesheet">
<link href="mobile.css" type="text/css" media="handheld" rel="stylesheet">        

        

        
        
      
        
it知識庫：探索移動Web網(wǎng)頁編碼設(shè)計，轉(zhuǎn)載需保留來源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。