為網(wǎng)站創(chuàng)建移動(dòng)功能支持的第一步是建立一個(gè)專門適用于移動(dòng)終端設(shè)備CSS的樣式表。
-
服務(wù)器端方法及UA字符串
其中的方法之-就是把涉及檢測用戶代理字符串的移動(dòng)樣式表用像PHP這樣的服務(wù)器端語言來進(jìn)行編寫。有了這項(xiàng)技術(shù)，網(wǎng)站將能檢測出移動(dòng)終端設(shè)備并提供合適的樣式表，或者將用戶重新定向到另- -個(gè)移動(dòng)網(wǎng)絡(luò)的子域，例如m.facebook.com. 這種服務(wù)器端方法有以下幾個(gè)優(yōu)點(diǎn):一是能 夠最大限度地保證網(wǎng)站的兼容性，二是它能允許瀏覽網(wǎng)站的移動(dòng)終端用戶查看-些權(quán)限較高的內(nèi)容。雖然這項(xiàng)技術(shù)能夠完美應(yīng)用于企業(yè)級的專業(yè)網(wǎng)站，但是其存在的一些實(shí)際問題使它很難在大多數(shù)普通網(wǎng)站上加以運(yùn)用。因?yàn)閹缀趺繒r(shí)每刻都在產(chǎn)生新的用戶代理字符串，所以想保存當(dāng)前的UA字符串列表是不可能的。. 此外，這種方法依賴于設(shè)備本身接替其真實(shí)用戶代理的能力，所以在互聯(lián)網(wǎng)，發(fā)展過程中很多瀏覽器都通過騙取用戶代理的UA字符串來解決這種類型的檢測。例如，在20世紀(jì)90年代，大多數(shù)UA字符串都以“Moilla”開頭從而通過網(wǎng)景公司的檢查，而近幾年來，Opera 瀏覽器又假裝成IE瀏覽器，十分混亂。分混亂。就像彼得·保羅·科赫所寫的一樣: “這簡直就是一個(gè)軍備競賽， 如果設(shè)備檢測真的流行起來，那么瀏覽器開發(fā)者就會(huì)開始騙取他們用戶的代理字符串來盡快結(jié)束這個(gè)檢測。
-
客戶端方法及媒體查詢
或者使用另外一種更簡單的方法，那就是直接從客戶端上對移動(dòng)終端設(shè)備進(jìn)行檢測。最早的檢測所包含的移動(dòng)樣式表的方法還包括利用樣式表的媒體類型來檢測，例如: <link rel="stylesheet" href="site.css"media="s<link rel=”stylesheet" href=" mobile.css"medias" hadhele, 在這里我們提到了兩個(gè)樣式表，第一個(gè)是sit.css,主要用于臺(tái)式電腦本電腦所使用的屏幕媒體類型，而第二個(gè)mobile.css則主要用于手持的移動(dòng)終端設(shè)備。雖然這的確是一個(gè)很不錯(cuò)的解決辦法,但是設(shè)備支持與否又是另外老一批的移動(dòng)終端設(shè)備基本都支持手持媒體類型，同時(shí)它們在實(shí)施過程中。伴隨著很多變化:有些手機(jī)禁用屏幕樣式表，并且只加載手持媒體類刑其他的兩項(xiàng)都允許。另外,如今大多數(shù)新推出的移動(dòng)終端已經(jīng)和手持?jǐn)?shù)碼設(shè)備沒有明顯的區(qū)分了這樣以便于網(wǎng)站開發(fā)者擯棄毫無生氣的移動(dòng)Web布局，從而為用戶提供計(jì)能更加全面的網(wǎng)頁瀏覽體驗(yàn)。從移動(dòng)終端設(shè)備使用了典型的小屏幕，我們就能通過檢測設(shè)備屏幕寬度是否小于等于480像素來確定其是不是手持?jǐn)?shù)碼設(shè)備: <link rel=" stylesheet" href=”mobile.css” media=” only screenand (max-device width:480px)”/>由于之前較老的一些手機(jī)不支持媒體查詢功能，所以這種方法只是用于新推出的部分手機(jī)，所以我們需要- -個(gè)兩 全其美的解決方法來挖掘這個(gè)絕大的潛在市場。首先，定義兩個(gè)樣式表:常規(guī)瀏覽器下無限制的screen.css,用antiscreen. CSS覆蓋所有你不想在移動(dòng)終端設(shè)備上顯示的格式。將這兩個(gè)樣式表組合成一個(gè)新的樣式表core.css : import url(“screen.css”); @import url(“antiscreen.css”) handheld; eimport url(“antiscreen.css" ) only screen and<link rel=" stylesheet" href=" mobile . css” media=" onlyand (max-device width:480px)” />
由于之前較老的一些手機(jī)不支持媒體查詢功能，所以這種方法只是用于新推出的部分手機(jī)，所以我們需要一個(gè)兩全 其美的解決方法來挖掘這個(gè)絕大的潛在市場。首先，定義兩個(gè)樣式表:常規(guī)瀏覽器下無限制的screen.css,用antiscreen. CSs覆蓋所有你不想在移動(dòng)終端設(shè)備上顯示的格式。將這兩個(gè)樣式表組合成一個(gè)新的樣式表core.css:
@import url( “screen.css" ); @import url( “antiscreen. css”) handheld; @import url( “antiscreen.css" ) only screen and(max-device-width:480px); 最后，用移動(dòng)瀏覽器新增的格式來定義- -個(gè)新的樣式表handheld.cs再將其鏈接到頁面上: <link rel=” stylesheet" href= ”core.css" media= ”screen” /><link rel=" stylesheet" href=" handheld. css”media=”handheld, only screen and (max-device-width: 480px)" />
雖然這項(xiàng)技術(shù)占有移動(dòng)終端市場很大的市場份額，但這并不意味著它就是完美的。像iPad這樣像素寬度超過480的移動(dòng)終端設(shè)備,這種方法是行不通的。換一個(gè)角度看，這些體積更大的移動(dòng)設(shè)備也不需要簡明的頁面布局。隨著技術(shù)的不斷發(fā)展，將會(huì)有越來越多的移動(dòng)終端設(shè)備不再適用于這種檢測模式?？上У氖牵捎谀壳八^的“標(biāo)準(zhǔn)”都是剛形成的，并未成為固定不變的條目，所以在未來想要推動(dòng)更新移動(dòng)設(shè)備的檢測方法也是很有難度的。除了設(shè)備檢測有不理想的地方，媒體查詢這種方法同樣也存在一些問題。 主要問題是，媒體查詢只對具有差異性的網(wǎng)頁內(nèi)容樣式有用，而且它不能控制網(wǎng)頁文本的發(fā)送。例如，用媒體查詢的方法可以隱藏-個(gè)側(cè)欄的內(nèi)容，但是這并不能有效防止用戶下載標(biāo)記。出于對移動(dòng)互聯(lián)網(wǎng)寬帶速度的考慮，新添加的HTML不能被人們忽視。
-
用戶啟動(dòng)法
考慮到使用移動(dòng)UA監(jiān)測的各種困難和媒體查詢的各種缺陷，像宜家等企業(yè)就讓用戶自己決定是否需要查看公司網(wǎng)站的移動(dòng)版本。這是一種最容易實(shí)現(xiàn)，也是最能保證萬無-失的辦法，但是這種辦法還有一個(gè)很明顯的缺點(diǎn)，那就是產(chǎn)生了過多的人機(jī)互動(dòng)，降低了用戶的自主程度。這樣的網(wǎng)站一般在頁面都有專門用于傳送用戶到其移動(dòng)網(wǎng)站的鏈接，--般都這樣表示“訪問移動(dòng)網(wǎng)站版本"。這種方法也有不好的地方，由于這個(gè)鏈接在頁面是可見的，所以無論是使用什么設(shè)備，只要你在瀏覽網(wǎng)頁，你就可能看見它，而很多移動(dòng)用戶很有可能沒有注意這個(gè)鏈接，但是一些并不使用移動(dòng)終端設(shè)備的用戶又錯(cuò)點(diǎn)了那個(gè)鏈接，這叫人有點(diǎn)哭笑不得。盡管如此，這種方法還是有值得學(xué)習(xí)的地方的，那就是能夠讓用戶自主決定是否訪問移動(dòng)網(wǎng)站。有些用戶喜歡用他們的移動(dòng)設(shè)備訪問頁面簡潔的網(wǎng)站，而有些用戶則更喜歡沒有限制的頁面布局，從而能夠一下子瀏覽整個(gè)網(wǎng)站，因人而異。
如今我們已經(jīng)對移動(dòng)樣式表進(jìn)行了很多優(yōu)化，是時(shí)候開始對我們想要改進(jìn)的移動(dòng)頁面風(fēng)格進(jìn)行具體細(xì)節(jié)的討論了。
-
用屏幕實(shí)際使用面積的增加與改變
移動(dòng)樣式表的初衷是讓網(wǎng)頁在較小的屏幕上得到很好的顯示。首先，這表示我們要將多列布局縮減為單列布局。大多數(shù)的手機(jī)屏幕都是豎直的，所有水平方向能利用的空間顯得格外珍貴，而且手機(jī)的整體頁面布局很難容納超過- -列的文本顯示。. 其次，通過設(shè)置頁面布局來減少整體的雜亂感，除了必要的顯示內(nèi)容和文本，其他的內(nèi)容-律不留。最后，通過縮減頁邊距和頁面填充來節(jié)省額外的像素以保持整個(gè)頁面結(jié)構(gòu)的嚴(yán)謹(jǐn)和簡潔。
-
降低帶寬
修改移動(dòng)樣式表的另一個(gè)目的就是通過降低帶寬來保證訪客在低速網(wǎng)絡(luò)環(huán)境下仍然能夠正常使用網(wǎng)頁。首先確保你已經(jīng)移除或替換了所有的頁面背景圖片，特別是那些- -進(jìn)入網(wǎng)站頁面就能看到的背景圖片。然后再設(shè)置顯示成不顯示任何不必要的圖片。如果你的網(wǎng)站使用了圖片作為行動(dòng)按鈕和導(dǎo)航圖標(biāo)，請考慮將這些圖片更換為純文本或者與CSS想匹配的代碼。如果你一-定要強(qiáng)制瀏覽器使用圖片替代文字的話，你可以選擇使用下面的代碼(使用JavaScript來為圖片添加類文本代碼并且保證alt屬性在你的標(biāo)記中是正確定義的):
除了移動(dòng)樣式表，我們還可以通過標(biāo)記來增加許多特別的移動(dòng)網(wǎng)絡(luò)功能。
-
可觸電話撥號
很明顯的，手持設(shè)備中的一大部分指的就是手機(jī)，那么讓我們使手機(jī)撥號變得更加簡易：
<a href=" tel :15032084566”class=" phone- link">(503) 208-4566</a>通過以上設(shè)置，你就能呼叫這個(gè)電話號碼了，同時(shí)也有一些事第一，因?yàn)殡娫捑W(wǎng)絡(luò)是國際通用的，所以前提是你所輸入的電話號機(jī)數(shù)字"1”開頭(而且“1” 是美國的電話代碼)。其次，不管這個(gè)號碼是否能撥通，你必須使用手機(jī)來打。由于上述方法。。們并沒有通過服務(wù)端法來講解，最好的辦法就是隱瞞這串?dāng)?shù)字鏈接是通過CSs來實(shí)現(xiàn)的事實(shí)。所以在你的屏幕樣式表上要使用手機(jī)連接類禁用這些鏈接格式，然后在手機(jī)上也要做相同的設(shè)置。
-
專有輸入法
在使用移動(dòng)在使用移動(dòng)Web瀏覽器的時(shí)候，另一個(gè)值得注意的事情是標(biāo)準(zhǔn)的全尺寸鍵盤很難很好地完成輸入。但是我們可以利用一些特殊 的HTML5輸入編碼來幫助我們的用戶更好地完成輸入。這類輸入方式能夠讓像iPhone這樣的移動(dòng)設(shè)備在進(jìn)行文字輸入時(shí)實(shí)現(xiàn)上下文的聯(lián)想跟蹤顯示。例如，當(dāng)你輸入"tel” 時(shí)，就會(huì)觸發(fā)數(shù)字鍵盤，然后使你能馬上輸入一串電話號碼，還有當(dāng)你輸入"email” 時(shí)，鍵盤會(huì)自動(dòng)跟蹤顯示@xx.的各種地址選項(xiàng)。HTML5輸入類型在移動(dòng)和非移動(dòng)瀏覽中都提供了有效的系統(tǒng)自帶瀏覽器驗(yàn)證和專門的輸入菜單。此外，由于不支持瀏覽器自發(fā)的降級區(qū)瀏覽，諸如<input type=" text" /> 這樣的特殊輸入類型，所以現(xiàn)在在移動(dòng)互聯(lián)網(wǎng)網(wǎng)站里普遍使用HTML5輸入類型也是行不通的。
-
定義視窗大小
當(dāng)今的移動(dòng)終端設(shè)備在呈現(xiàn)-個(gè)網(wǎng)頁頁面時(shí)，它們通常都會(huì)通過壓縮頁面內(nèi)容來使他們更適合設(shè)備的視口或者可視面積。雖然默認(rèn)的視窗定位通常都能與頁面布局和諧搭配，但是有時(shí)候?qū)σ暣斑M(jìn)行適當(dāng)?shù)恼{(diào)整也是很有必要的。蘋果公司最先推出-種通過使用<meta>標(biāo)簽的辦法來完成視窗定義，而且其他的設(shè)備制造商也開始使用這種方法。
相關(guān)文章
精彩導(dǎo)讀
熱門資訊
