[譯]讓手機也可訪問你的網站

veryszhang發表於2012-06-03
網站

英文原文>>enter link description here

  • 介紹

面向手機的Web開發是當下一個熱門方向。在今年，首次出現智慧手機的銷售超過PC機。越來越多的使用者通過手機等移動裝置來瀏覽網頁，這就意味著開發人員對網站優化使之適應手機瀏覽器成為關鍵。

對大多數開發人員來說，“手機”戰場仍然是是一片充滿未知數的汪洋。很多人都有現成的傳統網站，但卻忽視了與之並肩的手機使用者。反之，網站設計更應該是面向桌面瀏覽器並儘量去相容手機瀏覽器，本網站（html5rocks.com）也不例外。動手吧，做一個網站的移動版只是舉手之勞。

  • 做一個對手機友好的網站——HTML5ROCKS.COM

作為練手，我認為從本網站 html5rocks著手將它升級為對一個對手機友好的版本是一件很有趣的事。為了最小的工作量，我過去僅僅只關注被要求的幾款智慧手機。當然，我練手的目的並不是要去從零開始去新建一個手機版網站再去維護兩套程式碼庫，因為那樣做純粹是嚴重浪費時間。我們已經有了一個確定的網站結構（結構語言負責，如（X）HTML），有一套很直觀的樣式（有層疊樣式表CSS負責），當然了網站的核心（有程式語言JS呢）都在也都在那裡。總之，很多網站也都這樣子罷了。

本文討論我們怎樣去面向Android和iOS裝置將 html5rocks優化出一個支援移動版的網站。在不同作業系統的裝置上試著載入 html5rocks，看上去都是五花八門，各有不同。再試幾個常見的網站，都基本沒有一個固定的樣式。所以，需要增加一些有益的東西在網站上，使其看起來更棒而且執行良好，然後你將看到的 html5rocks就是…… enter image description hereenter image description here （左圖來自桌面瀏覽器，右圖來自手機）

  • CSS的媒體庫（CSS MEDIA QUERIES）

有一段時期HTML4和CSS2也支援 media-dependent 樣式表，例如：

<link rel="stylesheet" media="print" href="printer.css">

當需要列印時，我們針對列印裝置提供一些特殊樣式的頁面內容。CSS3又採納了針對媒體型別這個想法，並向增強媒體庫功能邁出一大步。媒體庫允許一些更精確的樣式表標籤來擴充套件媒體型別的有效性。這使得定製特殊輸出裝置的的樣式，而不用改變內容本身成為可能。直接將已存在的樣式輸出為想要修改的樣式，這真是不可思議，太棒了！

你可以通過在外部樣式表的media屬性中定義目標裝置的螢幕寬度（screen width），裝置寬度（device width），定位（orientation）等屬性來使用媒體庫。詳情見W3C媒體庫API。

  1. 目標螢幕大小（TARGETING SCREEN SIZES）

在下面的例子中，phone.css將被應該在考慮手持裝置瀏覽器，並且寬度<=320畫素的寬屏裝置的程式碼中。

    <link rel="stylesheet"  media="handheld, only screen and (max-device-width: 320px)" href="phone.css">

在媒體庫中這個only關鍵字是考慮到不相容CSS3的瀏覽器忽略本規則。

下面這一句是針對螢幕寬度在641px 到800px之間的裝置。

<link rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">

媒體庫程式碼也可以出現在<style>標籤之間，下面這一句是僅當螢幕縱向時，定位all媒體庫的：

<style>
  @media only all and (orientation: portrait) { ... }
</style>
  1. MEDIA="HANDHELD"

我們需要駐足幾分鐘，來討論一下media="handheld"。事實就是, Android 和iOS 忽略了media="handheld"。聲稱使用了media="handheld"將會錯過高質量的內容，（瀏覽器）開發商也不大可能去為了media="handheld"而去維護一個降低質量的版本。把這作為所謂的”整個網路世界“的座右銘，所以現在大部分只能手機瀏覽器都直接忽略了手持裝置樣式表。

現在mobile.css執行的試一下以改變的風格：

a.減少了網頁中多餘的空格和間距，對小螢幕來說空白都是多餘的！！！

b.移除了:hover states狀態。這玩意兒確實在觸控式螢幕裝置沒什麼用。

c.調整佈局為單列。後面詳談。

d.移除了box-shadow，即那些主要的div容器的邊框陰影，大型的邊框陰影降低網頁效能。

e.使用CSS彈性佈局的盒模型box-ordinal-group來改變主頁上主要模組的順序。你將會發現在主頁（HTML5ROCKS.COM）上顯示在"LEARN BY MAJOR HTML5 FEATURE GROUPS"之前的”TUTORIALS“在手機板上卻會顯示在"LEARN BY MAJOR HTML5 FEATURE GROUPS"後面。這種順序變化在手上產生的流動感，其實框架卻沒有發生任何改變。CSS的彈性和模型簡直FTW（For The Win，網路用詞，一般用來表達對某一事物喜歡到極致的心情）了！！！！

f.移除透明效果opacity，alpha濾鏡值的修改嚴重影響效能。

!!!!---------悲劇，翻譯到這裡發現這篇文章已經已經有人翻譯了>>這裡去看

相關文章