Blogger 製作自適應網頁(RWD)﹍懶人法實作

過去在「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」曾經歸納出的其中一個結論，對於 "有修改能力、能處理自適應範本" 的站長，Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」，這是行動版的最佳選擇。

然而，RWD 範本不是那麼好製作，要修改現成的 RWD 範本也需要一定的功力，因此 WFU 思考的是，Blogger 平台下實現 RWD 有沒有比較簡單的方法？

其實官方提供的判斷式語法，就能實現類似 RWD 的效果。只不過判斷式也非萬靈丹，有少數場景無法使用。本篇將分享一則實例，如何在無法使用 Blogger 語法時，製作出 RWD 頁面。

一、RWD 概念

1. 基礎知識

要說明 RWD 實例，得先具備 RWD 的知識。這部分網路上的入門教學文章很多，可直接參考以下：

• RWD 簡單介紹與優缺點、實作入門
• CSS Media Queries 介紹與基礎應用 → CSS 相關語法詳細說明

有了以上基礎後，可以繼續往下看。RWD 簡單說，就是在不同螢幕尺寸的網頁，分別為版面設定不同的 CSS 參數。在市面上手機、平板尺寸多元，還得兼顧螢幕平放、直立效果的情況下，可想而知 RWD 要含括這麼多種效果，是多大的工程了。


2. 是否存在懶人法？

這篇「RWD 必備技術」提到一句話 "其實你不太需要去對每個裝置都去做調整，基本上使用行動裝置的 max-device-width: 480px，就綽綽有餘了" 引起 WFU 的注意，這也是 WFU 想要追求的懶人法，如果可以用最少的設定完成 RWD，也就是只設定螢幕寬度 480px 這種情況，那麼的確能增加站長製作 RWD 的意願。

先說結論，懶人法可以應付多數版面，不過也有一點難處，某些情況下需要特別處理，後面章節會有實例說明。


3. Blogger RWD 範例

+綜合口味 分享了他的 Blogger RWD 範本製作經驗，為各種不同螢幕尺寸設定了對應的 CSS，有興趣的讀者可以參考這篇「Responsive Design Blogger 經驗談」，可瞭解 RWD 需要調整的區塊有哪些地方，以及需要具備的技巧。

二、Blogger 判斷式

1. 欄位數量的影響

這是身為 Blogger 平台的小確幸，官方提供了行動版頁面的判斷式，也就是說我們有一個「二分法」的 RWD 功能，可單獨為行動版頁面設定 CSS。

一個正規的 RWD 範本可能至少需要為四~五種螢幕尺寸設定 CSS，也就是「四分法」、「五分法」。但是部落格平台的版面，其實多數使用二~三欄而已，不像一般網站那麼複雜，說實在不太需要到四分法以上。

如果跟 WFU BLOG 一樣只使用了二欄式的版面，那麼其實「二分法」就足夠，可以利用官方的判斷式，來實現懶人 RWD 效果。判斷式語法的使用方法，請參考「Blogger 行動版範本修改技巧」。


2. Blogger 語法的侷限

Blogger 語法並非標準 W3C 語法，不能放在任意的網頁位置，例如「HTML/Javascript」小工具、文章之中，這些地方都不能執行 Blogger 判斷式。唯一能使用的地方，就是 Blogger 範本之中。

如果你的 RWD 效果在 Blogger 範本之中就能搞定，那麼這件事就沒什麼問題。WFU BLOG 有一個特殊案例，「會員中心」需要有 RWD 的效果，但是因為 "會員中心" 只會在特定頁面執行，為了縮減範本的容量，不想把 CSS 放在範本之中，導致無法在範本之中使用判斷式來製作 "會員中心" 的行動版。


3. 行動版判斷式

行動版判斷式的另一個侷限是，得先開啟 Blogger 行動版。

這是非常重要、也是會被忽略的一點，因為有的站長選擇在後台「關閉行動版」。當關閉行動版之後，Blogger 不會執行行動版範本內容，自然判斷式語法就失效了！

會選擇關閉行動版範本的站長，多半是使用了 RWD 範本。在這種情況下，若還想 "借用判斷式語法" 來解決一些問題，那麼可參考本文的實作案例語法。

三、會員中心實例

1. 原始效果

本站的「會員中心」算是一個三欄式的版面配置，其實原本就有為行動裝置另外設定 CSS，但是當初只有利用 "浮動調整欄位寬度" 的技巧，並沒有做到 RWD 的真正精神 "調整欄位位置"。

例如原本網頁版的效果如下：




模擬 iPhone4 直立的效果，可看到欄位位置不變，但各欄位變得很彆扭：




這是 iPhone 4 橫躺的效果，螢幕較寬時欄位比較正常，但左邊按鈕變得高度不一：




我們可以得出結論，利用 CSS 設定區塊寬度的百分比，來 "浮動調整欄位寬度"，並非 RWD 好的解決方法，要有好的效果還是得真正改變區塊的排列位置。


2. 改變區塊位置

於是重新規劃了一下「會員中心」的各個區塊，行動版的畫面調整如下：

• 左邊按鈕改成兩排直列，使用全部寬度
• 會員頭像、編號那個區塊，改為置中、使用全部寬度
• 輸入資料改為置中、使用全部寬度

同時，延續「一、RWD 概念」→「2. 是否存在懶人法？」的概念，除了通用的 CSS 內容之外，另外為 480px 寬度以下的螢幕尺寸，單獨調整部分 CSS 內容，例如以下的語法：

@media screen and (max-width: 480px) {
// 填入版面 480px 寬時所調整的 CSS
}


修改後的模擬效果如下，這次改用 Nexus 5，先看直立的畫面：




接下來看 Nexu5 橫躺的畫面：



糟糕！左邊按鈕的版面錯亂了~~

原來 Nexu5 橫躺以後的寬度超過 480px，我用的懶人設定法有缺陷，超過 480px 以後，沒有把這個情況判讀為行動裝置，CSS 跑去讀取通用參數，造成了顯示網頁版效果時異常。

四、RWD 二分法的解決方法

1. 完整的 Media Queries 語法

為何有 480px 以上的異狀？原因可能是：沒有為二分法建立兩套不同內容的 CSS。我只單純針對 480px 以下來 "修正"、"調整" 原先的 CSS 通用內容，而不是建立一套 480px 以下的 CSS 內容，相信不同的瀏覽器在處理時，多少會引起一些邏輯上的錯誤。

正確的作法應該是，建立兩套 Media Queries 語法：

@media screen and (max-width: 480px) {
// 480px 以下的 CSS
}
@media screen and (min-width: 481px) {
// 480px 以上的 CSS
}

這麼做的話就可以避免邏輯上沒有涵蓋的部分，不過缺點就是，兩套內容會讓 CSS 變得很龐大，而且製作兩套 CSS 比較費功夫。

可想而知，二分法已經這麼麻煩的時候，四分法、五分法的處理有多繁瑣了。


2. 使用 Blogger 行動版判斷式

回過頭來，這時就覺得 "Blogger 行動版判斷式" 實在太棒了，完全不必理會各種行動裝置螢幕的寬度，不必為各種尺寸做不同設定，只要偵測到是手機的螢幕，一律執行我們設定的 CSS。這樣的做法讓我處理 CSS 非常省事，不必製作兩套 CSS，也讓我的 RWD 懶人法復活。

用判斷式的概念，程式碼我只需要這麼寫就行了：

<b:if cond='data:blog.isMobile'>
// 原本我替 480px 以下設定 的 CSS
</b:if>

看一下修改後的「會員系統」畫面：





Nexus 5 橫躺後的畫面，640px 寬一樣被判定為行動版，這才是完美的懶人二分法。

五、Blogger 判斷式的替代語法

如前所述，本站的「會員系統」只想在特定頁面執行，將無法在範本中使用行動版判斷式，那麼該怎麼解決這件事呢？

其實原理也很簡單，行動裝置的網址一律會出現 "m=1" 的字串，利用 js 偵測到這個字串時，加入行動版的 CSS 語法即可。

簡單看個範例，首先參考「如何使用jQuery版本」，確定範本中已經安裝了 jQuery。

接著使用以下程式碼：

<!--行動版 css start-->
<span id="mobile_style" style="display: none;">
// 這裡填入所有行動版要執行的 CSS
</span>
<script>
(function ($) {
var $span = $("#mobile_style");
if(location.href.search("m=1") > 0) {
$span.after("<style>" + $span.html() +"</style>");
}
$span.remove();
} )(jQuery);
</script>
<!--行動版 css end, designed by WFU BLOG-->
以上的綠色字串，請置換為你的行動版 CSS。當偵測到行動版時，這些 CSS 就會被執行。

六、小結

本文內容很長，做個總結複習一下，Blogger 平台的懶人 RWD 作法有兩種：

• 1. 使用 Media Queries 語法：建立兩套 Media Queries 語法，例如 480px 以下一套 CSS、481px 以上一套 CSS，會比較麻煩一些。
• 2. 使用 Blogger 行動版判斷式：只需要針對行動版的 CSS 進行修正即可。在不能使用官方判斷式語法的情境下，利用 js 判斷網址是否有 "m=1" 字串，也可得到跟判斷式一樣的效果。

Blogger 行動版相關技巧：