響應式的WEB設計（二）

上集回顧：

昨天講了頁面如何根據不同的裝置尺寸做出響應。主要是利用了@media命令以及尺寸百分比化這兩招。

 

上集補充：

其中，利用以下CSS設定讓圖片或視頻大小不超過裝置螢幕的寬度：

img, object{max-width:100%;}

這一語句一般加在@media screen and (max-width:481)的判斷內，主要是讓手機使用者在查看網頁時圖片不至於比手機螢幕還大。

這一招在《Head First Moblie Web》中被稱為“Fluid Image Technique”。

 

視頻能夠做成響應式嗎？

除了圖片以外，還有一種常見的多媒體形式是視頻。有時在web設計中，根據需要會在頁面中加入視頻，一般視頻都是上傳到youtube、馬鈴薯/優酷、新浪等網站上後，再用連結的形式加入到我們的網頁中。

為什麼在iphone上看不到youtube視頻？（在境外）

在IOS上查看網頁視頻時，在不越獄安裝外掛程式的情況下，是沒法看flash格式的視頻的，因為iphone上的瀏覽器不支援Adobe Flash，這跟蘋果等公司的商業競爭政策有關，咱也沒辦法。對於這一問題，使用youtube視頻源的web設計有一個解決方案，就是將原來嵌套在網頁中的object embed格式的程式碼片段替換成新的程式碼片段。

如，舊的頁面嵌套程式碼片段為：

<object width="230" height="179" type="application/x-shockwave-flash" 
data="http://www.youtube.com/v/O-jOEAufDQ4?fs=1&amp;h1=en_US&amp;rel=0">
<embed src=... />
</object>

將其替換為：

<iframe src="http://www.youtube.com/embed/O-jOEAufDQ4" style="max-width:100%"></iframe>

可以看到，兩個視頻的出路其實是不同的，youtube將用於行動裝置顯示的嵌入型視頻放在embed目錄下，這樣大部分的行動裝置就可以正常觀看視頻了。

國內的視頻源可以用<iframe>這一招嗎？

分別截取馬鈴薯和sina的各一段嵌入式視頻代碼可以看到用的都是object embed方式：

馬鈴薯：

<embed 
src="....swf" 
type="application/x-shockwave-flash" 
allowscriptaccess="always" 
allowfullscreen="true" 
wmode="opaque" 
width="480" height="400"></embed>

sina：

<div><object id='sinaplayer' width='480' height='370' >
<param name='allowScriptAccess' value='always' />
<embed pluginspage='http://www.macromedia.com/go/getflashplayer' 
src='....swf' 
type='application/x-shockwave-flash' 
allowScriptAccess='always'
allowFullScreen='true'
name='sinaplayer'  
width='480' height='370'></embed>
</object></div>

兩者的參數設定也差不多，不過馬鈴薯的代碼要簡潔很多。

現在，用<iframe>代碼塊將馬鈴薯視頻地址包起來，放入測試頁面中，會發生一個問題：

（這是圖片哦……）

不能全屏了……這是因為單獨截取了播放地址，而與flash有關的例如allowFullScreen等設定都被拋棄了。那麼用iframe這個方法顯然就有兩個問題了：

一是片源格式沒有改變，還是swf格式，仍然不能被不支援Adobe Flash的手機播放。

二是因為丟失了flash播放器的參數設定，而喪失了部分功能。

這樣顯然是不能接受的。

對於第一點，只能期待視頻網站使用更通用的視頻格式來規避各個硬體廠商之間商業競爭帶來的副作用；對於第二點，我們將繼續使用object embed的方式，因為手機看不到flash格式的親們已經找到了各種破解、外掛程式來彌補了，所以web設計者在沒有更通用片源格式的情況下，還是沿用之前的方式好了。

但是，視頻格式的大小一般是固定的，只使用CSS而不使用javascript很難動態根據裝置的大小或者瀏覽器當前的尺寸來動態改變。就視頻的寬度（width）而言，是可以設定成百分比的形式，如設定成容器的80%，那麼該視頻就會一直占其所在容器的80%的寬度，但是高度（height）就無法設定了，因為一般人都不會按比例去縮放瀏覽器視窗。要麼是拉窄點，要麼是縮短點。所以，靠百分比的方式來保證視頻尺寸的縮放不太現實。

在這樣的前提下，還是希望視頻就保持一定的尺寸，而網頁的其他部分根據瀏覽器的大小動態改變布局。

如視頻所示：

 可以看到，在拉動瀏覽器的整個過程中，視頻的尺寸是不改變的，直到瀏覽器的寬度小於視頻的寬度時，視頻的寬度才變小（使用了上面提到的Fluid Image Technique）。

製作整個效果沒有什麼新的技巧，也就是將CSS的尺寸判斷又兩種變成了三種而已。具體的可以看示範代碼。

【示範代碼在這裡下載】

總結：

視頻大小的自適應單靠CSS本身似乎是做不到的。而希望行動裝置可以正常的觀看頁面視頻還期待於視頻網站使用更通用的視頻格式而不是flash……

 

最後拿一個書中的公式收尾吧

RWD = Fluid-grid layouts + CSS media queries + Fluid Image/Media + a state of mind

大意是

響應式設計 = 流式網格布局 + @media語句 + 流式圖片/媒體 + 設計者的意識

 

下集預告：

行動裝置限於頻寬、網速和運算晶片的處理速度，對網頁的效能要求要高於案頭網頁，那麼該怎麼辦呢？如何測試我們頁面的效能？如何設計才能有更好的效能讓行動裝置瀏覽起來更為流暢呢？