[p]在這篇文章中，我將努力揭開mobile web開發(fā)的神秘面紗，換句話說，也就是為了移動設(shè)備上的用戶體驗可以被接受，代碼得怎么設(shè)計。我將闡述“mobile web”與普通網(wǎng)站的不同之處、可以讓網(wǎng)站成功運行在移動設(shè)備和桌面瀏覽器上的基本技巧、一些mobile web設(shè)計中的建議和禁忌、以及大量資源 – 你可以去找到更多有用的信息。[/p]
[img]http://bbon.cn/wp-content/uploads/2010/01/mobile-web.jpg[/img]
[p][b]mobile web和普通網(wǎng)站到底有何不同呢？[/b][/p]
[p]這是個很好的問題 – 首先，也許我們應(yīng)該從“什么是mobile web”的問題開始。畢竟，用戶用移動設(shè)備訪問的mobile web，跟他們在家里用臺式機訪問的網(wǎng)站是獨立的不同的部分。當我說“mobile web”時，我指的是“通過移動設(shè)備訪問的網(wǎng)站”。[/p]
[p]在opera，我們?nèi)硇耐度攵鴦?chuàng)造出的瀏覽器允許你查看整個網(wǎng)絡(luò)，不管瀏覽設(shè)備是否有這個能力。只要你在建立網(wǎng)站時，付出一點兒細心、尊敬并遵循 web標準，你就可以為所有人所有設(shè)備創(chuàng)建只有一個版本的網(wǎng)站 – 唯一的一個網(wǎng)站。但是，有一些例外情況 – 在某些情況下，只有分版本的網(wǎng)站才行得通，一會你會看到這一點。[/p]
移動領(lǐng)域的競爭環(huán)境并不平衡
[p]在桌面領(lǐng)域，對于我們前端開發(fā)者來說，形式正在好轉(zhuǎn) – 大多數(shù)現(xiàn)代瀏覽器已經(jīng)對web標準支持的非常好了，無論是opera、firefox（以及其他gecko內(nèi)核瀏覽器）或者safari（以及其他 webkit內(nèi)核瀏覽器），甚至ie帶給我們的痛苦都比原來少了。雖然ie6的用戶群體數(shù)量仍然非常杯具，但這應(yīng)該歸結(jié)于大多數(shù)人封閉的使用習慣等因素。但是，移動設(shè)備領(lǐng)域在這方面卻是不同尋常的：[/p]
你擁有能為“full web”提供支持的瀏覽器，像iphone上的opera mobile和safari。opera mobile使用了與桌面版本相同的渲染引擎，所以對標準的支持相差無幾。
[li]你擁有并不很爽的瀏覽器，例如ie，它們對web標準僅能提供有限的支持。它們中的一部分只支持wap（例如winwap），另一些支持其他像 chtml或html-mp這樣的標準（例如日本ntt docomo的imode瀏覽器），還有一些只支持web標準中的有限子集（例如netfront、pocket ie、以及blazer）。[/li]
最后，你擁有operamini，以及其他通過代理機制的瀏覽器。它主要只是作為連接用戶和一個大服務(wù)器群的客戶端界面。當用戶提交一個url時，客戶端會讓服務(wù)端查找這個頁面。然后它會把頁面轉(zhuǎn)換成一個輕量級的二進制標記語言，將它格式化成適合移動設(shè)備查看的形式，并發(fā)送回客戶端顯示。這種方式的最主要優(yōu)勢，是可以使頁面體積減少90% 左右，幫助用戶節(jié)省很多帶寬費用。這種標記語言表明web標準并不能很好的表現(xiàn)在移動設(shè)備上，因為在這種服務(wù)的方式下，operamini對 ajax/javascript某些方面將支持的不是很好 – 在這兒有更詳細的解釋。
注意：不要指望你的超級ajax和dom腳本動畫網(wǎng)站在移動設(shè)備上會有良好表現(xiàn)。javascript在移動設(shè)備上的支持程度千差萬別。時刻提供優(yōu)雅降級吧。這種做法有一個例子叫做hijax。
[p]我們可以看到，在移動設(shè)備的跨瀏覽器兼容方面，你要思考的問題有很多。但是不要怕 – 我隨后的建議會給你指引一個正確的方向；并且隨著時間的推移，移動瀏覽器對標準的支持將會得到改善，屆時我們前端開發(fā)者真的再也不需要為它們操心了。你問我這一切什么時候會實現(xiàn)？who knows！[/p]
移動瀏覽器的其它限制還有那些？
[p]當然，在移動設(shè)備上開發(fā)網(wǎng)站時，除了瀏覽器對標準的支持外，還會遇到其它更多的限制因素。設(shè)備自身的限制因素，你也不得不考慮。例如：[/p]
[ul]
[li]有限的控制 – 不要只假設(shè)你的用戶會使用鼠標來控制頁面中的一切，你也要提供鍵盤的選擇。一些手機用戶可能沒有類似鼠標這樣的東東，所以類似這樣的結(jié)構(gòu) [i]:hover[/i] 以及 [i]onclick [/i]對他們來說是沒有用的（這對可用性方面也是非常重要的 – 一些殘障用戶可能在用手方面會有些缺陷）。為用戶提供的表單設(shè)計也同樣重要 – 你可能已經(jīng)感受到，用手機來填寫那些又臭又長的必填表單有多么不爽。為了解決這個問題，試著去把那一坨內(nèi)容用下拉菜單的方式展現(xiàn)出來，這比等著用戶一個字一個字手動輸入來的更靠譜（譯者注：目前國內(nèi)有某些山寨機瀏覽器對下拉菜單的支持可能有不同程度的問題。例如基于mtk系統(tǒng)的聯(lián)想i61，默認情況下會顯示所有選項，而在某些情況下會產(chǎn)生變形和“漂移”，使用時需要謹慎些）。另外，給表單設(shè)置一個最有可能的初始值，也是一個好主意。[/li]
[li]有限的屏幕尺寸 – 想象一下你那美妙的1024×768的設(shè)計在240×320屏幕下，或者更小的屏幕下，它的可用性會是什么樣子……有一些方法可以應(yīng)對這個情況 – 你可以故意把頁面設(shè)計的很簡潔流暢，或者你可以通過采取功能檢測或媒體類型檢測（諸如此類）的手段，為移動設(shè)備提供不同的頁面。另外對于屏幕尺寸，有些手機可能不需要這么麻煩，它們可能會提供“縮放模式”這樣的機制，但是你卻不能保證這一點。[/li]
[li]有限的內(nèi)存和帶寬 – 移動設(shè)備所提供的可用內(nèi)存明顯比臺式機少得多。因此，在你設(shè)計站點時，需要特別小心的考慮那些超大容量的相冊圖片，以及交互式流媒體視頻的應(yīng)用程序。此外，一些移動瀏覽器提供了關(guān)閉圖像顯示的選項，但是你也同樣不能確定這一點。[/li]
[li]有限的排版 – 我靠，你對臺式機上那些排版非常癡情？你沒有看到移動設(shè)備上的表現(xiàn)！雖然這條規(guī)則有很多例外情況，但大多數(shù)移動設(shè)備對字體的選擇非常有限，只有一兩種（like 1 or 2）。這個限制是由系統(tǒng)或瀏覽器決定的。[/li]
[li]有限的顏色 – 一些移動設(shè)備在顏色方面的支持也非常有限?？紤]你有多少頁面的體驗需要依賴于顏色，并確認那些對比色在移動設(shè)備上仍然支持。[/li][/ul]
[p]這些限制因素，就是導致mobile web的體驗與pc web的體驗不同之處的真正原因。千萬別欺騙自己，覺得自己的網(wǎng)站在移動設(shè)備上的用戶體驗與臺式機上會保持一致 – 這純屬yy。當然，你拋開瀏覽器，千方百計去確認用戶體驗這一點仍然值得肯定。[/p]
[p]真正的辦法，去確保你的網(wǎng)站為移動用戶提供一個良好的體驗，是測試，測試，再測試！一些web設(shè)計師們已經(jīng)認識到，除了他們自己的手機、臺式機以及游戲機瀏覽器外，還需要有一大堆移動設(shè)備需要準備在手頭。[/p]
解決問題的不同方法
人們普遍意識到，有三種辦法可以解決移動開發(fā)的問題（已經(jīng)被cameron moll證實了 – 找他的書看看）。可能的話，我建議你試試這三種方式 – 如前所述，在opera，我們堅持相信one web的理念 – 但是剛才我也說過，有些情況下這是很難實現(xiàn)的，或者也是沒有必要的。下面是這三種方法：
[li]務(wù)必堅持遵循web標準[/li]
[li]創(chuàng)建一個完全獨立的移動網(wǎng)站[/li]
只創(chuàng)建一個站點(one web)，但是根據(jù)瀏覽它的設(shè)備和瀏覽器情況，添加優(yōu)化代碼。
[p]現(xiàn)在，讓我們開始對這些點逐個講解。[/p]
堅持遵循web標準和最佳實踐
[p]一個好網(wǎng)站的基礎(chǔ)，是要有一個好的html結(jié)構(gòu)，以及美妙的css（表現(xiàn)）和javascript（行為）。如果你認真地遵循web標準，大多數(shù)移動瀏覽器至少會很好地解析并至少會基本可用，這是非常有可能的。例如：[/p]
[ul]
[li]一個網(wǎng)站，有良好的html結(jié)構(gòu)順序并在html中沒有裝飾性圖片，在移動瀏覽器的單列模式或移動模式中，會呈現(xiàn)得很有邏輯性。[/li]
[li]如果你的表單元素中含有“[i]label[/i]”元素，瀏覽器將把它渲染得更有表單區(qū)域的感覺。[/li]
[li]如果你給css和javascript使用了優(yōu)雅降級/漸進增強技術(shù)，瀏覽器如果不支持、簡化、忽略某些屬性，這時站點的可用性幾率會大大增加。[/li][/ul]
[p]如果你花費時間精力去研究的話，在提升移動用戶體驗方面，還有更多事情可以去做。如果你的目標受眾包括大量使用非html瀏覽器（例如支持wap或chtml的某些日本瀏覽器）用戶，那么你可能不得不檢測設(shè)備并提供適當?shù)膬?nèi)容。[/p]
提供一個完全獨立的移動網(wǎng)站
如前所述，我認為如果可能的話應(yīng)該盡量避免使用這種方式。你可以做設(shè)備檢測并自動重定向來避免給用戶使用帶來麻煩，但是這意味著你不得不維護兩套網(wǎng)站。最主要的方法是通過ua嗅探來識別瀏覽器，或在服務(wù)端進行設(shè)備功能檢測，然后再給用戶提供相應(yīng)的站點。在dev.opera.com，有很多優(yōu)秀的文章來講述如何實現(xiàn) – 查看最后的資源部分。
[p]但也有例外，對于完全獨立的網(wǎng)站來講 – 你不得不始終考慮用戶體驗情況。某些類型的瀏覽設(shè)備可能不兼容于特定的網(wǎng)站或者特定的功能。例如，有一個大學校園網(wǎng)，帶有部門電話號碼的搜索功能，但同時也包含了一大堆校園歷史的網(wǎng)頁。如果你想去與某人會面卻找不到他們部門時，你大概會想在移動設(shè)備上使用搜索功能，但你在外出的時候也不太可能想坐下來閱讀那么多的文字。[/p]
[p]在這種情況下，你可以使用下面提到的一些技巧，來為移動設(shè)備提供網(wǎng)站中某個功能的一部分，或者干脆為移動設(shè)備創(chuàng)建一套完全獨立的網(wǎng)站。你只需檢測用戶使用的設(shè)備類型并自動提供給他相應(yīng)的站點，并把這個過程完全公開給用戶，但是很多很多人并不愿意這個功能把他們完全限制住，所以如果你要這么做的話，就需要給用戶提供一個指向完整站點的鏈接，用戶可以自行選擇是否用它來訪問完整站點。[/p]
[p]一句話警告 – 設(shè)備檢測很容易被濫用。你可能經(jīng)?？吹揭粋€網(wǎng)站的桌面版本非常牛b，而它的移動站點卻非常的垃圾。因為開發(fā)者只是將移動站點放在一個非常低標準的位置上。事實上，目標受眾的設(shè)備水平并不均衡，現(xiàn)在很多的移動瀏覽器都具有處理完整web頁面的能力了！你應(yīng)該盡可能地讓設(shè)備發(fā)揮他們最高的處理能力，并且要發(fā)揮移動設(shè)備的特別優(yōu)勢，比如基于位置的服務(wù)（lbs），還有 [i]tel:[/i] 協(xié)議 – 在超鏈接點擊時它可以讓設(shè)備撥打一個電話號碼。[/p]
只提供一個網(wǎng)站(one web)
進行到這里時，就開始變得有趣了。你可以再次依靠服務(wù)端功能檢測，但這次是在單一網(wǎng)站的基礎(chǔ)上進行優(yōu)化，而不是重定向到另一個獨立網(wǎng)站。有一些手機所支持功能的數(shù)據(jù)庫可以參考，例如wurfl。它是以xml文件的形式開放的，你可以在設(shè)計優(yōu)化內(nèi)容之前，先通過它來查詢設(shè)備所支持的功能。你還可以查詢移動設(shè)備的ua字符串，找出這些設(shè)備的其他細節(jié)參數(shù)，例如是否有攝像頭，屏幕尺寸是多少，以及它的語言種類等信息。
[p]在客戶端，你已經(jīng)得到了為移動設(shè)備而優(yōu)化內(nèi)容所需的兩個條件 – 媒體類型（media types）和媒體查詢（media queries）。[/p]
媒體類型(media types)
[p]就像你知道的那樣，你可以指定不同的css來實現(xiàn)不同的用途，例如：[/p]


[p]手持類的媒體類型允許你針對移動設(shè)備使用優(yōu)化版的樣式（例如精簡的布局和排版等）。這是一個被支持得很好的機制，實現(xiàn)起來也很簡單，但它確實有它的缺陷。就像之前所說，它經(jīng)常被開發(fā)者濫用，來給網(wǎng)站提供一個蹩腳的最低標準布局。事實上，operamini最近改變了默認類型，把默認使用手持型樣式表（handheld stylesheet）改為屏幕型樣式表（screen stylesheet）。operamini可以處理大多數(shù)完整網(wǎng)站，因此它并不真正需要使用手持型樣式表（handheld stylesheet）。如果你樂意，你可以在operamini的瀏覽器選項中手動設(shè)置回移動視圖。[/p]
媒體查詢(media queries)
[p]媒體查詢是css3的一個構(gòu)想，它的用途跟條件注釋非常相似 – 你可以把一大堆css規(guī)則封裝嵌入到一個媒體查詢中，然后把它應(yīng)用到你的標記結(jié)構(gòu)中，這一切取決于一個條件，類似“屏幕尺寸是否小于480px？”然后把代碼放進去，代碼類似這樣：[/p]img {
margin: 0 0 10px 10px;
float: right;
}
@media all and (max-width: 480px) {
img {
margin: 10px auto;
float: none;
display: block;
}
}
[p]你甚至可以使用多個媒體查詢，像下面這樣：[/p]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，在這個例子中（源代碼點擊這里查看），瀏覽器中的圖片在屏幕大于480px時會向右浮動，文本會環(huán)繞圖片并通過外邊距留出一點兒舒服的距離（另有一個信息隱藏在 [i]p [/i]元素中，并命名了一個 [i]class[/i] 叫 [i]info [/i]- 看看html代碼）。文本流在一些小屏幕中看起來可能會有些蹩腳，因為那里沒有足夠的空間來讓圖片和定量的文本放置在同一行中，所以當屏幕小于480px時，圖片就需要改變一下，讓文本不再圍繞在它旁邊，而是用[i] display:block[/i] 讓它們顯示在不同行中。等等 – 還有更精彩的！如果屏幕非常小以至于不能有效地展示圖片，那就讓它們消失，然后讓隱藏信息顯示在圖片那兒，替代那些圖片顯示文本描述 – 這是一種將信息傳達給讀者的一種另類技巧，利用它也可以為那些使用屏幕閱讀器的盲人用戶提供原始文本，以便他們順利瀏覽網(wǎng)站。圖1展示了三個不同的瀏覽視圖，這是在那些支持媒體查詢的瀏覽器中（例如opera 9.5）表現(xiàn)出的不同形式。
[p][img]http://bbon.cn/wp-content/uploads/2010/01/004902zbe.jpg[/img][/p]
[p]圖1：例子中三個不同的瀏覽模式[/p]
聽起來挺好，但是有沒有不足呢？好吧，目前瀏覽器對媒體查詢的支持程度非常有限。opera瀏覽器支持它們，safari 3也可以（以及其它基于webkit內(nèi)核的現(xiàn)代瀏覽器），但是firefox 3之前的版本并不支持，ie或其他瀏覽器也不支持。解決問題的方法之一，是使用媒體類型和媒體查詢的組合。這種方法在我的這篇文章中做過解釋。這是一種變通方案，但肯定不夠理想。這點在將來應(yīng)該會有所改善。
摘要總結(jié)
[p]目前就是如此而已。我希望我的移動開發(fā)世界之旅會對各位有所幫助。我在這只是拋磚引玉，要想深入學習的話，可以查看下面這些資源。[/p]
資源
mobile web design book, by cameron moll
designing and developing mobile web sites in the real world — 一個實例研究 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://smbey0nd.com/2010/01/17/coding_for_the_mobile_web/