2015年5月11日

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

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

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

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



一、RWD 概念


1. 基礎知識

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


有了以上基礎後,可以繼續往下看。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 的真正精神 "調整欄位位置"。

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

rwd-wfublog-member-system-0


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

rwd-wfublog-member-system-1


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

rwd-wfublog-member-system-2


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


2. 改變區塊位置

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

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

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

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



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

rwd-wfublog-member-system-3


接下來看 Nexu5 橫躺的畫面:

rwd-wfublog-member-system-4

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

原來 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>


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

rwd-wfublog-member-system-5

rwd-wfublog-member-system-6

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 行動版相關技巧:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。