国产欧美精品专区一区二区_91www永久在线精品果冻传媒_日韩成人亚洲综合专区无码av_欧美激情一区二区三区高清视频_免费福利在线视频亚洲_日韩精品无码人妻自慰喷水_把腿张开老子cao哭你动态图_51a性爱高清免费视频_国产无码资源在线观看資源免費看_再深点灬舒服灬太大了网站

[p]在這篇文章中，我將努力揭開(kāi)mobile web開(kāi)發(fā)的神秘面紗，換句話(huà)說(shuō)，也就是為了移動(dòng)設(shè)備上的用戶(hù)體驗(yàn)可以被接受，代碼得怎么設(shè)計(jì)。我將闡述“mobile web”與普通網(wǎng)站的不同之處、可以讓網(wǎng)站成功運(yùn)行在移動(dòng)設(shè)備和桌面瀏覽器上的基本技巧、一些mobile web設(shè)計(jì)中的建議和禁忌、以及大量資源 – 你可以去找到更多有用的信息。[/p]
[img]http://bbon.cn/wp-content/uploads/2010/01/mobile-web.jpg[/img]
[p][b]mobile web和普通網(wǎng)站到底有何不同呢？[/b][/p]
[p]這是個(gè)很好的問(wèn)題 – 首先，也許我們應(yīng)該從“什么是mobile web”的問(wèn)題開(kāi)始。畢竟，用戶(hù)用移動(dòng)設(shè)備訪(fǎng)問(wèn)的mobile web，跟他們?cè)诩依镉门_(tái)式機(jī)訪(fǎng)問(wèn)的網(wǎng)站是獨(dú)立的不同的部分。當(dāng)我說(shuō)“mobile web”時(shí)，我指的是“通過(guò)移動(dòng)設(shè)備訪(fǎng)問(wèn)的網(wǎng)站”。[/p]
[p]在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)。[/p]
移動(dòng)領(lǐng)域的競(jìng)爭(zhēng)環(huán)境并不平衡
[p]在桌面領(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的用戶(hù)群體數(shù)量仍然非常杯具，但這應(yīng)該歸結(jié)于大多數(shù)人封閉的使用習(xí)慣等因素。但是，移動(dòng)設(shè)備領(lǐng)域在這方面卻是不同尋常的：[/p]
你擁有能為“full web”提供支持的瀏覽器，像iphone上的opera mobile和safari。opera mobile使用了與桌面版本相同的渲染引擎，所以對(duì)標(biāo)準(zhǔn)的支持相差無(wú)幾。
[li]你擁有并不很爽的瀏覽器，例如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）。[/li]
最后，你擁有operamini，以及其他通過(guò)代理機(jī)制的瀏覽器。它主要只是作為連接用戶(hù)和一個(gè)大服務(wù)器群的客戶(hù)端界面。當(dāng)用戶(hù)提交一個(gè)url時(shí)，客戶(hù)端會(huì)讓服務(wù)端查找這個(gè)頁(yè)面。然后它會(huì)把頁(yè)面轉(zhuǎn)換成一個(gè)輕量級(jí)的二進(jìn)制標(biāo)記語(yǔ)言，將它格式化成適合移動(dòng)設(shè)備查看的形式，并發(fā)送回客戶(hù)端顯示。這種方式的最主要優(yōu)勢(shì)，是可以使頁(yè)面體積減少90% 左右，幫助用戶(hù)節(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)畫(huà)網(wǎng)站在移動(dòng)設(shè)備上會(huì)有良好表現(xiàn)。javascript在移動(dòng)設(shè)備上的支持程度千差萬(wàn)別。時(shí)刻提供優(yōu)雅降級(jí)吧。這種做法有一個(gè)例子叫做hijax。
[p]我們可以看到，在移動(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！[/p]
移動(dòng)瀏覽器的其它限制還有那些？
[p]當(dāng)然，在移動(dòng)設(shè)備上開(kāi)發(fā)網(wǎng)站時(shí)，除了瀏覽器對(duì)標(biāo)準(zhǔn)的支持外，還會(huì)遇到其它更多的限制因素。設(shè)備自身的限制因素，你也不得不考慮。例如：[/p]
[ul]
[li]有限的控制 – 不要只假設(shè)你的用戶(hù)會(huì)使用鼠標(biāo)來(lái)控制頁(yè)面中的一切，你也要提供鍵盤(pán)的選擇。一些手機(jī)用戶(hù)可能沒(méi)有類(lèi)似鼠標(biāo)這樣的東東，所以類(lèi)似這樣的結(jié)構(gòu) [i]:hover[/i] 以及 [i]onclick [/i]對(duì)他們來(lái)說(shuō)是沒(méi)有用的（這對(duì)可用性方面也是非常重要的 – 一些殘障用戶(hù)可能在用手方面會(huì)有些缺陷）。為用戶(hù)提供的表單設(shè)計(jì)也同樣重要 – 你可能已經(jīng)感受到，用手機(jī)來(lái)填寫(xiě)那些又臭又長(zhǎng)的必填表單有多么不爽。為了解決這個(gè)問(wèn)題，試著去把那一坨內(nèi)容用下拉菜單的方式展現(xiàn)出來(lái)，這比等著用戶(hù)一個(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è)好主意。[/li]
[li]有限的屏幕尺寸 – 想象一下你那美妙的1024×768的設(shè)計(jì)在240×320屏幕下，或者更小的屏幕下，它的可用性會(huì)是什么樣子……有一些方法可以應(yīng)對(duì)這個(gè)情況 – 你可以故意把頁(yè)面設(shè)計(jì)的很簡(jiǎn)潔流暢，或者你可以通過(guò)采取功能檢測(cè)或媒體類(lèi)型檢測(cè)（諸如此類(lèi)）的手段，為移動(dòng)設(shè)備提供不同的頁(yè)面。另外對(duì)于屏幕尺寸，有些手機(jī)可能不需要這么麻煩，它們可能會(huì)提供“縮放模式”這樣的機(jī)制，但是你卻不能保證這一點(diǎn)。[/li]
[li]有限的內(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)。[/li]
[li]有限的排版 – 我靠，你對(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覽器決定的。[/li]
[li]有限的顏色 – 一些移動(dòng)設(shè)備在顏色方面的支持也非常有限?？紤]你有多少頁(yè)面的體驗(yàn)需要依賴(lài)于顏色，并確認(rèn)那些對(duì)比色在移動(dòng)設(shè)備上仍然支持。[/li][/ul]
[p]這些限制因素，就是導(dǎo)致mobile web的體驗(yàn)與pc web的體驗(yàn)不同之處的真正原因。千萬(wàn)別欺騙自己，覺(jué)得自己的網(wǎng)站在移動(dòng)設(shè)備上的用戶(hù)體驗(yàn)與臺(tái)式機(jī)上會(huì)保持一致 – 這純屬yy。當(dāng)然，你拋開(kāi)瀏覽器，千方百計(jì)去確認(rèn)用戶(hù)體驗(yàn)這一點(diǎn)仍然值得肯定。[/p]
[p]真正的辦法，去確保你的網(wǎng)站為移動(dòng)用戶(hù)提供一個(gè)良好的體驗(yàn)，是測(cè)試，測(cè)試，再測(cè)試！一些web設(shè)計(jì)師們已經(jīng)認(rèn)識(shí)到，除了他們自己的手機(jī)、臺(tái)式機(jī)以及游戲機(jī)瀏覽器外，還需要有一大堆移動(dòng)設(shè)備需要準(zhǔn)備在手頭。[/p]
解決問(wèn)題的不同方法
人們普遍意識(shí)到，有三種辦法可以解決移動(dòng)開(kāi)發(fā)的問(wèn)題（已經(jīng)被cameron moll證實(shí)了 – 找他的書(shū)看看）?？赡艿脑?huà)，我建議你試試這三種方式 – 如前所述，在opera，我們堅(jiān)持相信one web的理念 – 但是剛才我也說(shuō)過(guò)，有些情況下這是很難實(shí)現(xiàn)的，或者也是沒(méi)有必要的。下面是這三種方法：
[li]務(wù)必堅(jiān)持遵循web標(biāo)準(zhǔn)[/li]
[li]創(chuàng)建一個(gè)完全獨(dú)立的移動(dòng)網(wǎng)站[/li]
只創(chuàng)建一個(gè)站點(diǎn)(one web)，但是根據(jù)瀏覽它的設(shè)備和瀏覽器情況，添加優(yōu)化代碼。
[p]現(xiàn)在，讓我們開(kāi)始對(duì)這些點(diǎn)逐個(gè)講解。[/p]
堅(jiān)持遵循web標(biāo)準(zhǔn)和最佳實(shí)踐
[p]一個(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ì)基本可用，這是非常有可能的。例如：[/p]
[ul]
[li]一個(gè)網(wǎng)站，有良好的html結(jié)構(gòu)順序并在html中沒(méi)有裝飾性圖片，在移動(dòng)瀏覽器的單列模式或移動(dòng)模式中，會(huì)呈現(xiàn)得很有邏輯性。[/li]
[li]如果你的表單元素中含有“[i]label[/i]”元素，瀏覽器將把它渲染得更有表單區(qū)域的感覺(jué)。[/li]
[li]如果你給css和javascript使用了優(yōu)雅降級(jí)/漸進(jìn)增強(qiáng)技術(shù)，瀏覽器如果不支持、簡(jiǎn)化、忽略某些屬性，這時(shí)站點(diǎn)的可用性幾率會(huì)大大增加。[/li][/ul]
[p]如果你花費(fèi)時(shí)間精力去研究的話(huà)，在提升移動(dòng)用戶(hù)體驗(yàn)方面，還有更多事情可以去做。如果你的目標(biāo)受眾包括大量使用非html瀏覽器（例如支持wap或chtml的某些日本瀏覽器）用戶(hù)，那么你可能不得不檢測(cè)設(shè)備并提供適當(dāng)?shù)膬?nèi)容。[/p]
提供一個(gè)完全獨(dú)立的移動(dòng)網(wǎng)站
如前所述，我認(rèn)為如果可能的話(huà)應(yīng)該盡量避免使用這種方式。你可以做設(shè)備檢測(cè)并自動(dòng)重定向來(lái)避免給用戶(hù)使用帶來(lái)麻煩，但是這意味著你不得不維護(hù)兩套網(wǎng)站。最主要的方法是通過(guò)ua嗅探來(lái)識(shí)別瀏覽器，或在服務(wù)端進(jìn)行設(shè)備功能檢測(cè)，然后再給用戶(hù)提供相應(yīng)的站點(diǎn)。在dev.opera.com，有很多優(yōu)秀的文章來(lái)講述如何實(shí)現(xiàn) – 查看最后的資源部分。
[p]但也有例外，對(duì)于完全獨(dú)立的網(wǎng)站來(lái)講 – 你不得不始終考慮用戶(hù)體驗(yàn)情況。某些類(lèi)型的瀏覽設(shè)備可能不兼容于特定的網(wǎng)站或者特定的功能。例如，有一個(gè)大學(xué)校園網(wǎng)，帶有部門(mén)電話(huà)號(hào)碼的搜索功能，但同時(shí)也包含了一大堆校園歷史的網(wǎng)頁(yè)。如果你想去與某人會(huì)面卻找不到他們部門(mén)時(shí)，你大概會(huì)想在移動(dòng)設(shè)備上使用搜索功能，但你在外出的時(shí)候也不太可能想坐下來(lái)閱讀那么多的文字。[/p]
[p]在這種情況下，你可以使用下面提到的一些技巧，來(lái)為移動(dòng)設(shè)備提供網(wǎng)站中某個(gè)功能的一部分，或者干脆為移動(dòng)設(shè)備創(chuàng)建一套完全獨(dú)立的網(wǎng)站。你只需檢測(cè)用戶(hù)使用的設(shè)備類(lèi)型并自動(dòng)提供給他相應(yīng)的站點(diǎn)，并把這個(gè)過(guò)程完全公開(kāi)給用戶(hù)，但是很多很多人并不愿意這個(gè)功能把他們完全限制住，所以如果你要這么做的話(huà)，就需要給用戶(hù)提供一個(gè)指向完整站點(diǎn)的鏈接，用戶(hù)可以自行選擇是否用它來(lái)訪(fǎng)問(wèn)完整站點(diǎn)。[/p]
[p]一句話(huà)警告 – 設(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），還有 [i]tel:[/i] 協(xié)議 – 在超鏈接點(diǎn)擊時(shí)它可以讓設(shè)備撥打一個(gè)電話(huà)號(hào)碼。[/p]
只提供一個(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)查詢(xún)?cè)O(shè)備所支持的功能。你還可以查詢(xún)移動(dòng)設(shè)備的ua字符串，找出這些設(shè)備的其他細(xì)節(jié)參數(shù)，例如是否有攝像頭，屏幕尺寸是多少，以及它的語(yǔ)言種類(lèi)等信息。
[p]在客戶(hù)端，你已經(jīng)得到了為移動(dòng)設(shè)備而優(yōu)化內(nèi)容所需的兩個(gè)條件 – 媒體類(lèi)型（media types）和媒體查詢(xún)（media queries）。[/p]
媒體類(lèi)型(media types)
[p]就像你知道的那樣，你可以指定不同的css來(lái)實(shí)現(xiàn)不同的用途，例如：[/p]


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