• 如何實施移動樣式表格

     為網(wǎng)站創(chuàng)建移動功能支持的第一步是建立一個專門適用于移動終端設(shè)備CSS的樣式表。

1. 服務器端方法及UA字符串

其中的方法之-就是把涉及檢測用戶代理字符串的移動樣式表用像PHP這樣的服務器端語言來進行編寫。有了這項技術(shù)，網(wǎng)站將能檢測出移動終端設(shè)備并提供合適的樣式表，或者將用戶重新定向到另- -個移動網(wǎng)絡(luò)的子域，例如m.facebook.com. 這種服務器端方法有以下幾個優(yōu)點:一是能 夠最大限度地保證網(wǎng)站的兼容性，二是它能允許瀏覽網(wǎng)站的移動終端用戶查看-些權(quán)限較高的內(nèi)容。雖然這項技術(shù)能夠完美應用于企業(yè)級的專業(yè)網(wǎng)站，但是其存在的一些實際問題使它很難在大多數(shù)普通網(wǎng)站上加以運用。因為幾乎每時每刻都在產(chǎn)生新的用戶代理字符串，所以想保存當前的UA字符串列表是不可能的。. 此外，這種方法依賴于設(shè)備本身接替其真實用戶代理的能力，所以在互聯(lián)網(wǎng)，發(fā)展過程中很多瀏覽器都通過騙取用戶代理的UA字符串來解決這種類型的檢測。例如，在20世紀90年代，大多數(shù)UA字符串都以“Moilla”開頭從而通過網(wǎng)景公司的檢查，而近幾年來，Opera 瀏覽器又假裝成IE瀏覽器，十分混亂。分混亂。就像彼得·保羅·科赫所寫的一樣: “這簡直就是一個軍備競賽， 如果設(shè)備檢測真的流行起來，那么瀏覽器開發(fā)者就會開始騙取他們用戶的代理字符串來盡快結(jié)束這個檢測。

2. 客戶端方法及媒體查詢

或者使用另外一種更簡單的方法，那就是直接從客戶端上對移動終端設(shè)備進行檢測。最早的檢測所包含的移動樣式表的方法還包括利用樣式表的媒體類型來檢測，例如: <link rel="stylesheet" href="site.css"media="s<link rel=”stylesheet" href=" mobile.css"medias" hadhele, 在這里我們提到了兩個樣式表，第一個是sit.css,主要用于臺式電腦本電腦所使用的屏幕媒體類型，而第二個mobile.css則主要用于手持的移動終端設(shè)備。雖然這的確是一個很不錯的解決辦法,但是設(shè)備支持與否又是另外老一批的移動終端設(shè)備基本都支持手持媒體類型，同時它們在實施過程中。伴隨著很多變化:有些手機禁用屏幕樣式表，并且只加載手持媒體類刑其他的兩項都允許。另外,如今大多數(shù)新推出的移動終端已經(jīng)和手持數(shù)碼設(shè)備沒有明顯的區(qū)分了這樣以便于網(wǎng)站開發(fā)者擯棄毫無生氣的移動Web布局，從而為用戶提供計能更加全面的網(wǎng)頁瀏覽體驗。從移動終端設(shè)備使用了典型的小屏幕，我們就能通過檢測設(shè)備屏幕寬度是否小于等于480像素來確定其是不是手持數(shù)碼設(shè)備: <link rel=" stylesheet" href=”mobile.css” media=” only screenand (max-device width:480px)”/>由于之前較老的一些手機不支持媒體查詢功能，所以這種方法只是用于新推出的部分手機，所以我們需要- -個兩 全其美的解決方法來挖掘這個絕大的潛在市場。首先，定義兩個樣式表:常規(guī)瀏覽器下無限制的screen.css,用antiscreen. CSS覆蓋所有你不想在移動終端設(shè)備上顯示的格式。將這兩個樣式表組合成一個新的樣式表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)” />
由于之前較老的一些手機不支持媒體查詢功能，所以這種方法只是用于新推出的部分手機，所以我們需要一個兩全 其美的解決方法來挖掘這個絕大的潛在市場。首先，定義兩個樣式表:常規(guī)瀏覽器下無限制的screen.css,用antiscreen. CSs覆蓋所有你不想在移動終端設(shè)備上顯示的格式。將這兩個樣式表組合成一個新的樣式表core.css:
@import url( “screen.css" ); @import url( “antiscreen. css”) handheld; @import url( “antiscreen.css" ) only screen and(max-device-width:480px); 最后，用移動瀏覽器新增的格式來定義- -個新的樣式表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)" />
雖然這項技術(shù)占有移動終端市場很大的市場份額，但這并不意味著它就是完美的。像iPad這樣像素寬度超過480的移動終端設(shè)備,這種方法是行不通的。換一個角度看，這些體積更大的移動設(shè)備也不需要簡明的頁面布局。隨著技術(shù)的不斷發(fā)展，將會有越來越多的移動終端設(shè)備不再適用于這種檢測模式?？上У氖牵捎谀壳八^的“標準”都是剛形成的，并未成為固定不變的條目，所以在未來想要推動更新移動設(shè)備的檢測方法也是很有難度的。除了設(shè)備檢測有不理想的地方，媒體查詢這種方法同樣也存在一些問題。 主要問題是，媒體查詢只對具有差異性的網(wǎng)頁內(nèi)容樣式有用，而且它不能控制網(wǎng)頁文本的發(fā)送。例如，用媒體查詢的方法可以隱藏-個側(cè)欄的內(nèi)容，但是這并不能有效防止用戶下載標記。出于對移動互聯(lián)網(wǎng)寬帶速度的考慮，新添加的HTML不能被人們忽視。

3. 用戶啟動法

考慮到使用移動UA監(jiān)測的各種困難和媒體查詢的各種缺陷，像宜家等企業(yè)就讓用戶自己決定是否需要查看公司網(wǎng)站的移動版本。這是一種最容易實現(xiàn)，也是最能保證萬無-失的辦法，但是這種辦法還有一個很明顯的缺點，那就是產(chǎn)生了過多的人機互動，降低了用戶的自主程度。這樣的網(wǎng)站一般在頁面都有專門用于傳送用戶到其移動網(wǎng)站的鏈接，--般都這樣表示“訪問移動網(wǎng)站版本"。這種方法也有不好的地方，由于這個鏈接在頁面是可見的，所以無論是使用什么設(shè)備，只要你在瀏覽網(wǎng)頁，你就可能看見它，而很多移動用戶很有可能沒有注意這個鏈接，但是一些并不使用移動終端設(shè)備的用戶又錯點了那個鏈接，這叫人有點哭笑不得。盡管如此，這種方法還是有值得學習的地方的，那就是能夠讓用戶自主決定是否訪問移動網(wǎng)站。有些用戶喜歡用他們的移動設(shè)備訪問頁面簡潔的網(wǎng)站，而有些用戶則更喜歡沒有限制的頁面布局，從而能夠一下子瀏覽整個網(wǎng)站，因人而異。

• 移動樣式表的變化

如今我們已經(jīng)對移動樣式表進行了很多優(yōu)化，是時候開始對我們想要改進的移動頁面風格進行具體細節(jié)的討論了。

1. 用屏幕實際使用面積的增加與改變

移動樣式表的初衷是讓網(wǎng)頁在較小的屏幕上得到很好的顯示。首先，這表示我們要將多列布局縮減為單列布局。大多數(shù)的手機屏幕都是豎直的，所有水平方向能利用的空間顯得格外珍貴，而且手機的整體頁面布局很難容納超過- -列的文本顯示。. 其次，通過設(shè)置頁面布局來減少整體的雜亂感，除了必要的顯示內(nèi)容和文本，其他的內(nèi)容-律不留。最后，通過縮減頁邊距和頁面填充來節(jié)省額外的像素以保持整個頁面結(jié)構(gòu)的嚴謹和簡潔。

2. 降低帶寬

修改移動樣式表的另一個目的就是通過降低帶寬來保證訪客在低速網(wǎng)絡(luò)環(huán)境下仍然能夠正常使用網(wǎng)頁。首先確保你已經(jīng)移除或替換了所有的頁面背景圖片，特別是那些- -進入網(wǎng)站頁面就能看到的背景圖片。然后再設(shè)置顯示成不顯示任何不必要的圖片。如果你的網(wǎng)站使用了圖片作為行動按鈕和導航圖標，請考慮將這些圖片更換為純文本或者與CSS想匹配的代碼。如果你一-定要強制瀏覽器使用圖片替代文字的話，你可以選擇使用下面的代碼(使用JavaScript來為圖片添加類文本代碼并且保證alt屬性在你的標記中是正確定義的):

• 超越樣式表

除了移動樣式表，我們還可以通過標記來增加許多特別的移動網(wǎng)絡(luò)功能。

1. 可觸電話撥號

很明顯的，手持設(shè)備中的一大部分指的就是手機，那么讓我們使手機撥號變得更加簡易：
<a href=" tel :15032084566”class=" phone- link">(503) 208-4566</a>通過以上設(shè)置，你就能呼叫這個電話號碼了，同時也有一些事第一，因為電話網(wǎng)絡(luò)是國際通用的，所以前提是你所輸入的電話號機數(shù)字"1”開頭(而且“1” 是美國的電話代碼)。其次，不管這個號碼是否能撥通，你必須使用手機來打。由于上述方法。。們并沒有通過服務端法來講解，最好的辦法就是隱瞞這串數(shù)字鏈接是通過CSs來實現(xiàn)的事實。所以在你的屏幕樣式表上要使用手機連接類禁用這些鏈接格式，然后在手機上也要做相同的設(shè)置。

2. 專有輸入法

在使用移動在使用移動Web瀏覽器的時候，另一個值得注意的事情是標準的全尺寸鍵盤很難很好地完成輸入。但是我們可以利用一些特殊 的HTML5輸入編碼來幫助我們的用戶更好地完成輸入。這類輸入方式能夠讓像iPhone這樣的移動設(shè)備在進行文字輸入時實現(xiàn)上下文的聯(lián)想跟蹤顯示。例如，當你輸入"tel” 時，就會觸發(fā)數(shù)字鍵盤，然后使你能馬上輸入一串電話號碼，還有當你輸入"email” 時，鍵盤會自動跟蹤顯示@xx.的各種地址選項。HTML5輸入類型在移動和非移動瀏覽中都提供了有效的系統(tǒng)自帶瀏覽器驗證和專門的輸入菜單。此外，由于不支持瀏覽器自發(fā)的降級區(qū)瀏覽，諸如<input type=" text" /> 這樣的特殊輸入類型，所以現(xiàn)在在移動互聯(lián)網(wǎng)網(wǎng)站里普遍使用HTML5輸入類型也是行不通的。

3. 定義視窗大小

當今的移動終端設(shè)備在呈現(xiàn)-個網(wǎng)頁頁面時，它們通常都會通過壓縮頁面內(nèi)容來使他們更適合設(shè)備的視口或者可視面積。雖然默認的視窗定位通常都能與頁面布局和諧搭配，但是有時候?qū)σ暣斑M行適當?shù)恼{(diào)整也是很有必要的。蘋果公司最先推出-種通過使用<meta>標簽的辦法來完成視窗定義，而且其他的設(shè)備制造商也開始使用這種方法。