Mobile Web下的編碼設(shè)計(jì)
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在這篇文章中，我將努力揭開(kāi)Mobile Web開(kāi)發(fā)的神秘面紗，換句話說(shuō)，也就是為了移動(dòng)設(shè)備上的用戶體驗(yàn)可以被接受，代碼得怎么設(shè)計(jì)。我將闡述“Mobile Web”與普通網(wǎng)站的不同之處、可以讓網(wǎng)站成功運(yùn)行在移動(dòng)設(shè)備和桌面瀏覽器上的基本技巧、一些Mobile Web設(shè)計(jì)中的建議和禁忌、以及大量資源 – 你可以去找到更多有用的信息。
Mobile Web和普通網(wǎng)站到底有何不同呢？ 這是個(gè)很好的問(wèn)題 – 首先，也許我們應(yīng)該從“什么是Mobile Web”的問(wèn)題開(kāi)始。畢竟，用戶用移動(dòng)設(shè)備訪問(wèn)的Mobile Web，跟他們?cè)诩依镉门_(tái)式機(jī)訪問(wèn)的網(wǎng)站是獨(dú)立的不同的部分。當(dāng)我說(shuō)“Mobile Web”時(shí)，我指的是“通過(guò)移動(dòng)設(shè)備訪問(wèn)的網(wǎng)站”。 在Opera，我們?nèi)硇耐度攵鴦?chuàng)造出的瀏覽器允許你查看整個(gè)網(wǎng)絡(luò)，不管瀏覽設(shè)備是否有這個(gè)能力。只要你在建立網(wǎng)站時(shí)，付出一點(diǎn)兒細(xì)心、尊敬并遵循 Web標(biāo)準(zhǔn)，你就可以為所有人所有設(shè)備創(chuàng)建只有一個(gè)版本的網(wǎng)站 – 唯一的一個(gè)網(wǎng)站。但是，有一些例外情況 – 在某些情況下，只有分版本的網(wǎng)站才行得通，一會(huì)你會(huì)看到這一點(diǎn)。 移動(dòng)領(lǐng)域的競(jìng)爭(zhēng)環(huán)境并不平衡 在桌面領(lǐng)域，對(duì)于我們前端開(kāi)發(fā)者來(lái)說(shuō)，形式正在好轉(zhuǎn) – 大多數(shù)現(xiàn)代瀏覽器已經(jīng)對(duì)Web標(biāo)準(zhǔn)支持的非常好了，無(wú)論是Opera、Firefox（以及其他Gecko內(nèi)核瀏覽器）或者Safari（以及其他 Webkit內(nèi)核瀏覽器），甚至IE帶給我們的痛苦都比原來(lái)少了。雖然IE6的用戶群體數(shù)量仍然非常杯具，但這應(yīng)該歸結(jié)于大多數(shù)人封閉的使用習(xí)慣等因素。但是，移動(dòng)設(shè)備領(lǐng)域在這方面卻是不同尋常的： 你擁有能為“Full Web”提供支持的瀏覽器，像iPhone上的Opera Mobile和Safari。Opera Mobile使用了與桌面版本相同的渲染引擎，所以對(duì)標(biāo)準(zhǔn)的支持相差無(wú)幾。 你擁有并不很爽的瀏覽器，例如IE，它們對(duì)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，以及其他通過(guò)代理機(jī)制的瀏覽器。它主要只是作為連接用戶和一個(gè)大服務(wù)器群的客戶端界面。當(dāng)用戶提交一個(gè)URL時(shí)，客戶端會(huì)讓服務(wù)端查找這個(gè)頁(yè)面。然后它會(huì)把頁(yè)面轉(zhuǎn)換成一個(gè)輕量級(jí)的二進(jìn)制標(biāo)記語(yǔ)言，將它格式化成適合移動(dòng)設(shè)備查看的形式，并發(fā)送回客戶端顯示。這種方式的最主要優(yōu)勢(shì)，是可以使頁(yè)面體積減少90% 左右，幫助用戶節(jié)省很多帶寬費(fèi)用。這種標(biāo)記語(yǔ)言表明Web標(biāo)準(zhǔn)并不能很好的表現(xiàn)在移動(dòng)設(shè)備上，因?yàn)樵谶@種服務(wù)的方式下，OperaMini對(duì) Ajax/JavaScript某些方面將支持的不是很好 – 在這兒有更詳細(xì)的解釋。 注意：不要指望你的超級(jí)Ajax和DOM腳本動(dòng)畫網(wǎng)站在移動(dòng)設(shè)備上會(huì)有良好表現(xiàn)。JavaScript在移動(dòng)設(shè)備上的支持程度千差萬(wàn)別。時(shí)刻提供優(yōu)雅降級(jí)吧。這種做法有一個(gè)例子叫做Hijax。 我們可以看到，在移動(dòng)設(shè)備的跨瀏覽器兼容方面，你要思考的問(wèn)題有很多。但是不要怕 – 我隨后的建議會(huì)給你指引一個(gè)正確的方向；并且隨著時(shí)間的推移，移動(dòng)瀏覽器對(duì)標(biāo)準(zhǔn)的支持將會(huì)得到改善，屆時(shí)我們前端開(kāi)發(fā)者真的再也不需要為它們操心了。你問(wèn)我這一切什么時(shí)候會(huì)實(shí)現(xiàn)？Who knows！ 移動(dòng)瀏覽器的其它限制還有那些？ 當(dāng)然，在移動(dòng)設(shè)備上開(kāi)發(fā)網(wǎng)站時(shí)，除了瀏覽器對(duì)標(biāo)準(zhǔn)的支持外，還會(huì)遇到其它更多的限制因素。設(shè)備自身的限制因素，你也不得不考慮。例如： 有限的控制 – 不要只假設(shè)你的用戶會(huì)使用鼠標(biāo)來(lái)控制頁(yè)面中的一切，你也要提供鍵盤的選擇。一些手機(jī)用戶可能沒(méi)有類似鼠標(biāo)這樣的東東，所以類似這樣的結(jié)構(gòu) :hover 以及 onClick 對(duì)他們來(lái)說(shuō)是沒(méi)有用的（這對(duì)可用性方面也是非常重要的 – 一些殘障用戶可能在用手方面會(huì)有些缺陷）。為用戶提供的表單設(shè)計(jì)也同樣重要 – 你可能已經(jīng)感受到，用手機(jī)來(lái)填寫那些又臭又長(zhǎng)的必填表單有多么不爽。為了解決這個(gè)問(wèn)題，試著去把那一坨內(nèi)容用下拉菜單的方式展現(xiàn)出來(lái)，這比等著用戶一個(gè)字一個(gè)字手動(dòng)輸入來(lái)的更靠譜（譯者注：目前國(guó)內(nèi)有某些山寨機(jī)瀏覽器對(duì)下拉菜單的支持可能有不同程度的問(wèn)題。例如基于MTK系統(tǒng)的聯(lián)想i61，默認(rèn)情況下會(huì)顯示所有選項(xiàng)，而在某些情況下會(huì)產(chǎn)生變形和“漂移”，使用時(shí)需要謹(jǐn)慎些）。另外，給表單設(shè)置一個(gè)最有可能的初始值，也是一個(gè)好主意。 有限的屏幕尺寸 – 想象一下你那美妙的1024×768的設(shè)計(jì)在240×320屏幕下，或者更小的屏幕下，它的可用性會(huì)是什么樣子……有一些方法可以應(yīng)對(duì)這個(gè)情況 – 你可以故意把頁(yè)面設(shè)計(jì)的很簡(jiǎn)潔流暢，或者你可以通過(guò)采取功能檢測(cè)或媒體類型檢測(cè)（諸如此類）的手段，為移動(dòng)設(shè)備提供不同的頁(yè)面。另外對(duì)于屏幕尺寸，有些手機(jī)可能不需要這么麻煩，它們可能會(huì)提供“縮放模式”這樣的機(jī)制，但是你卻不能保證這一點(diǎn)。 有限的內(nèi)存和帶寬 – 移動(dòng)設(shè)備所提供的可用內(nèi)存明顯比臺(tái)式機(jī)少得多。因此，在你設(shè)計(jì)站點(diǎn)時(shí)，需要特別小心的考慮那些超大容量的相冊(cè)圖片，以及交互式流媒體視頻的應(yīng)用程序。此外，一些移動(dòng)瀏覽器提供了關(guān)閉圖像顯示的選項(xiàng)，但是你也同樣不能確定這一點(diǎn)。 有限的排版 – 我靠，你對(duì)臺(tái)式機(jī)上那些排版非常癡情？你沒(méi)有看到移動(dòng)設(shè)備上的表現(xiàn)！雖然這條規(guī)則有很多例外情況，但大多數(shù)移動(dòng)設(shè)備對(duì)字體的選擇非常有限，只有一兩種（like 1 or 2）。這個(gè)限制是由系統(tǒng)或?yàn)g覽器決定的。 有限的顏色 – 一些移動(dòng)設(shè)備在顏色方面的支持也非常有限。考慮你有多少頁(yè)面的體驗(yàn)需要依賴于顏色，并確認(rèn)那些對(duì)比色在移動(dòng)設(shè)備上仍然支持。 這些限制因素，就是導(dǎo)致Mobile Web的體驗(yàn)與PC Web的體驗(yàn)不同之處的真正原因。千萬(wàn)別欺騙自己，覺(jué)得自己的網(wǎng)站在移動(dòng)設(shè)備上的用戶體驗(yàn)與臺(tái)式機(jī)上會(huì)保持一致 – 這純屬YY。當(dāng)然，你拋開(kāi)瀏覽器，千方百計(jì)去確認(rèn)用戶體驗(yàn)這一點(diǎn)仍然值得肯定。 真正的辦法，去確保你的網(wǎng)站為移動(dòng)用戶提供一個(gè)良好的體驗(yàn)，是測(cè)試，測(cè)試，再測(cè)試！一些Web設(shè)計(jì)師們已經(jīng)認(rèn)識(shí)到，除了他們自己的手機(jī)、臺(tái)式機(jī)以及游戲機(jī)瀏覽器外，還需要有一大堆移動(dòng)設(shè)備需要準(zhǔn)備在手頭。 解決問(wèn)題的不同方法 人們普遍意識(shí)到，有三種辦法可以解決移動(dòng)開(kāi)發(fā)的問(wèn)題（已經(jīng)被Cameron Moll證實(shí)了 – 找他的書(shū)看看）?？赡艿脑?，我建議你試試這三種方式 – 如前所述，在Opera，我們堅(jiān)持相信One Web的理念 – 但是剛才我也說(shuō)過(guò)，有些情況下這是很難實(shí)現(xiàn)的，或者也是沒(méi)有必要的。下面是這三種方法： 務(wù)必堅(jiān)持遵循Web標(biāo)準(zhǔn) 創(chuàng)建一個(gè)完全獨(dú)立的移動(dòng)網(wǎng)站 只創(chuàng)建一個(gè)站點(diǎn)(One Web)，但是根據(jù)瀏覽它的設(shè)備和瀏覽器情況，添加優(yōu)化代碼。 現(xiàn)在，讓我們開(kāi)始對(duì)這些點(diǎn)逐個(gè)講解。 堅(jiān)持遵循Web標(biāo)準(zhǔn)和最佳實(shí)踐 一個(gè)好網(wǎng)站的基礎(chǔ)，是要有一個(gè)好的HTML結(jié)構(gòu)，以及美妙的CSS（表現(xiàn)）和JavaScript（行為）。如果你認(rèn)真地遵循Web標(biāo)準(zhǔn)，大多數(shù)移動(dòng)瀏覽器至少會(huì)很好地解析并至少會(huì)基本可用，這是非常有可能的。例如： 一個(gè)網(wǎng)站，有良好的HTML結(jié)構(gòu)順序并在HTML中沒(méi)有裝飾性圖片，在移動(dòng)瀏覽器的單列模式或移動(dòng)模式中，會(huì)呈現(xiàn)得很有邏輯性。 如果你的表單元素中含有“l(fā)abel”元素，瀏覽器將把它渲染得更有表單區(qū)域的感覺(jué)。 如果你給CSS和JavaScript使用了優(yōu)雅降級(jí)/漸進(jìn)增強(qiáng)技術(shù)，瀏覽器如果不支持、簡(jiǎn)化、忽略某些屬性，這時(shí)站點(diǎn)的可用性幾率會(huì)大大增加。 如果你花費(fèi)時(shí)間精力去研究的話，在提升移動(dòng)用戶體驗(yàn)方面，還有更多事情可以去做。如果你的目標(biāo)受眾包括大量使用非HTML瀏覽器（例如支持WAP或CHTML的某些日本瀏覽器）用戶，那么你可能不得不檢測(cè)設(shè)備并提供適當(dāng)?shù)膬?nèi)容。 提供一個(gè)完全獨(dú)立的移動(dòng)網(wǎng)站 如前所述，我認(rèn)為如果可能的話應(yīng)該盡量避免使用這種方式。你可以做設(shè)備檢測(cè)并自動(dòng)重定向來(lái)避免給用戶使用帶來(lái)麻煩，但是這意味著你不得不維護(hù)兩套網(wǎng)站。最主要的方法是通過(guò)UA嗅探來(lái)識(shí)別瀏覽器，或在服務(wù)端進(jìn)行設(shè)備功能檢測(cè)，然后再給用戶提供相應(yīng)的站點(diǎn)。在dev.opera.com，有很多優(yōu)秀的文章來(lái)講述如何實(shí)現(xiàn) – 查看最后的資源部分。 但也有例外，對(duì)于完全獨(dú)立的網(wǎng)站來(lái)講 – 你不得不始終考慮用戶體驗(yàn)情況。某些類型的瀏覽設(shè)備可能不兼容于特定的網(wǎng)站或者特定的功能。例如，有一個(gè)大學(xué)校園網(wǎng)，帶有部門電話號(hào)碼的搜索功能，但同時(shí)也包含了一大堆校園歷史的網(wǎng)頁(yè)。如果你想去與某人會(huì)面卻找不到他們部門時(shí)，你大概會(huì)想在移動(dòng)設(shè)備上使用搜索功能，但你在外出的時(shí)候也不太可能想坐下來(lái)閱讀那么多的文字。 在這種情況下，你可以使用下面提到的一些技巧，來(lái)為移動(dòng)設(shè)備提供網(wǎng)站中某個(gè)功能的一部分，或者干脆為移動(dòng)設(shè)備創(chuàng)建一套完全獨(dú)立的網(wǎng)站。你只需檢測(cè)用戶使用的設(shè)備類型并自動(dòng)提供給他相應(yīng)的站點(diǎn)，并把這個(gè)過(guò)程完全公開(kāi)給用戶，但是很多很多人并不愿意這個(gè)功能把他們完全限制住，所以如果你要這么做的話，就需要給用戶提供一個(gè)指向完整站點(diǎn)的鏈接，用戶可以自行選擇是否用它來(lái)訪問(wèn)完整站點(diǎn)。 一句話警告 – 設(shè)備檢測(cè)很容易被濫用。你可能經(jīng)常看到一個(gè)網(wǎng)站的桌面版本非常牛B，而它的移動(dòng)站點(diǎn)卻非常的垃圾。因?yàn)殚_(kāi)發(fā)者只是將移動(dòng)站點(diǎn)放在一個(gè)非常低標(biāo)準(zhǔn)的位置上。事實(shí)上，目標(biāo)受眾的設(shè)備水平并不均衡，現(xiàn)在很多的移動(dòng)瀏覽器都具有處理完整Web頁(yè)面的能力了！你應(yīng)該盡可能地讓設(shè)備發(fā)揮他們最高的處理能力，并且要發(fā)揮移動(dòng)設(shè)備的特別優(yōu)勢(shì)，比如基于位置的服務(wù)（LBS），還有 tel: 協(xié)議 – 在超鏈接點(diǎn)擊時(shí)它可以讓設(shè)備撥打一個(gè)電話號(hào)碼。 只提供一個(gè)網(wǎng)站(One Web) 進(jìn)行到這里時(shí)，就開(kāi)始變得有趣了。你可以再次依靠服務(wù)端功能檢測(cè)，但這次是在單一網(wǎng)站的基礎(chǔ)上進(jìn)行優(yōu)化，而不是重定向到另一個(gè)獨(dú)立網(wǎng)站。有一些手機(jī)所支持功能的數(shù)據(jù)庫(kù)可以參考，例如WURFL。它是以XML文件的形式開(kāi)放的，你可以在設(shè)計(jì)優(yōu)化內(nèi)容之前，先通過(guò)它來(lái)查詢?cè)O(shè)備所支持的功能。你還可以查詢移動(dòng)設(shè)備的UA字符串，找出這些設(shè)備的其他細(xì)節(jié)參數(shù)，例如是否有攝像頭，屏幕尺寸是多少，以及它的語(yǔ)言種類等信息。 在客戶端，你已經(jīng)得到了為移動(dòng)設(shè)備而優(yōu)化內(nèi)容所需的兩個(gè)條件 – 媒體類型（media types）和媒體查詢（media queries）。 媒體類型(media types) 就像你知道的那樣，你可以指定不同的CSS來(lái)實(shí)現(xiàn)不同的用途，例如： 手持類的媒體類型允許你針對(duì)移動(dòng)設(shè)備使用優(yōu)化版的樣式（例如精簡(jiǎn)的布局和排版等）。這是一個(gè)被支持得很好的機(jī)制，實(shí)現(xiàn)起來(lái)也很簡(jiǎn)單，但它確實(shí)有它的缺陷。就像之前所說(shuō)，它經(jīng)常被開(kāi)發(fā)者濫用，來(lái)給網(wǎng)站提供一個(gè)蹩腳的最低標(biāo)準(zhǔn)布局。事實(shí)上，OperaMini最近改變了默認(rèn)類型，把默認(rèn)使用手持型樣式表（handheld stylesheet）改為屏幕型樣式表（screen stylesheet）。OperaMini可以處理大多數(shù)完整網(wǎng)站，因此它并不真正需要使用手持型樣式表（handheld stylesheet）。如果你樂(lè)意，你可以在OperaMini的瀏覽器選項(xiàng)中手動(dòng)設(shè)置回移動(dòng)視圖。 媒體查詢(media queries) 媒體查詢是CSS3的一個(gè)構(gòu)想，它的用途跟條件注釋非常相似 – 你可以把一大堆CSS規(guī)則封裝嵌入到一個(gè)媒體查詢中，然后把它應(yīng)用到你的標(biāo)記結(jié)構(gòu)中，這一切取決于一個(gè)條件，類似“屏幕尺寸是否小于480px？”然后把代碼放進(jìn)去，代碼類似這樣： img { margin: 0 0 10px 10px; float: right; } @media all and (max-width: 480px) { img { margin: 10px auto; float: none; display: block; } }你甚至可以使用多個(gè)媒體查詢，像下面這樣： body { max-width:800px; font-family:georgia, serif; } img { margin:0 0 10px 10px; float:right; } .info { position:absolute; left:8000px; } @media all and (max-width: 480px) { img { margin:10px auto; float:none; display:block; } } @media all and (max-width: 240px) { img { display:none; } .info { position:static; } }OK，在這個(gè)例子中（源代碼點(diǎn)擊這里查看），瀏覽器中的圖片在屏幕大于480px時(shí)會(huì)向右浮動(dòng)，文本會(huì)環(huán)繞圖片并通過(guò)外邊距留出一點(diǎn)兒舒服的距離（另有一個(gè)信息隱藏在 p 元素中，并命名了一個(gè) class 叫 info - 看看HTML代碼）。文本流在一些小屏幕中看起來(lái)可能會(huì)有些蹩腳，因?yàn)槟抢餂](méi)有足夠的空間來(lái)讓圖片和定量的文本放置在同一行中，所以當(dāng)屏幕小于480px時(shí)，圖片就需要改變一下，讓文本不再圍繞在它旁邊，而是用 display:block 讓它們顯示在不同行中。等等 – 還有更精彩的！如果屏幕非常小以至于不能有效地展示圖片，那就讓它們消失，然后讓隱藏信息顯示在圖片那兒，替代那些圖片顯示文本描述 – 這是一種將信息傳達(dá)給讀者的一種另類技巧，利用它也可以為那些使用屏幕閱讀器的盲人用戶提供原始文本，以便他們順利瀏覽網(wǎng)站。圖1展示了三個(gè)不同的瀏覽視圖，這是在那些支持媒體查詢的瀏覽器中（例如Opera 9.5）表現(xiàn)出的不同形式。 圖1：例子中三個(gè)不同的瀏覽模式 聽(tīng)起來(lái)挺好，但是有沒(méi)有不足呢？好吧，目前瀏覽器對(duì)媒體查詢的支持程度非常有限。Opera瀏覽器支持它們，Safari 3也可以（以及其它基于Webkit內(nèi)核的現(xiàn)代瀏覽器），但是Firefox 3之前的版本并不支持，IE或其他瀏覽器也不支持。解決問(wèn)題的方法之一，是使用媒體類型和媒體查詢的組合。這種方法在我的這篇文章中做過(guò)解釋。這是一種變通方案，但肯定不夠理想。這點(diǎn)在將來(lái)應(yīng)該會(huì)有所改善。 摘要總結(jié) 目前就是如此而已。我希望我的移動(dòng)開(kāi)發(fā)世界之旅會(huì)對(duì)各位有所幫助。我在這只是拋磚引玉，要想深入學(xué)習(xí)的話，可以查看下面這些資源。 資源 Mobile web design book, by Cameron Moll Designing and developing mobile web sites in the real world — 一個(gè)實(shí)例研究 by Brian Suda Server-side capability detection for mobile devices by Brian Suda (包含WURFL, UA字符串等信息) Ajax/JavaScript support in Opera Mini 4, by me Kristian von Streng Hæhre’s Opera Mini request header reference How to serve the right content to mobile browsers, 同樣by牛B的me — 包含媒體類型和媒體查詢 Creating safe media queries that work cross browser Web design with Opera Mobile in mind, 再一次 by me The WURFL homepage The Opera Mobile homepage The Opera Mini homepage 原文：http://carsonified.com/blog/features/css/coding-for-the-mobile-web/ 中文：http://www.smbey0nd.com/2010/01/17/coding_for_the_mobile_web/ 該文章在 2010/2/2 2:18:52 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
