Responsive Design Blogger 經驗談

By mixflavor

In life, 育

2014/04/15

2 min read

本篇為Responsive Web Design （RWD）的技術性文章。

前言

這次綜合口味2.0版的改版採用了RWD的版本，原本的考量是：

因為Blogger的手機版範本無法加入手機圖標（apple-touch-icon）。
如果用手機版範本，那麼部落格的網址會不一樣，網址後面會多加「?m=1」。
網址不一樣會連帶影響：用手機看的人分享網址後，由於網址後面加了「?m=1」，所以用電腦點網址的人會看到手機版網頁而不是電腦版網頁。
如果是用手機版範本的話，想在手機上看電腦版就要手動把網址改成「?m=0」，但那會令抓網址的facebook留言消失。

基於以上原因，捨棄Blogger內建的手機版範本，改用RWD範本我覺得有必要性～

製作RWD的網站之前，可以先好好想想並規劃一下：

真的需要RWD嗎？如果只需要Blogger的文章跟內建留言，可以用行動版範本就好XD
如果需要，那有哪些元素在行動裝置上想要被保留下來？
可以在行動裝置上捨棄掉哪些元素？

方法

接下來說說RWD的經驗——其實在Blogger做RWD可以很單純，也可以很複雜。

首先，在<head>加入判斷手機的原始碼：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

再來看看下面的CSS原始碼：

/* --- RESPONSIVE start--- */
@media only screen and (max-width:1024px){
}
@media only screen and (max-width:979px){
}
@media only screen and (max-width:767px){
}
@media only screen and (max-width:479px){
}
@media only screen and (max-width:319px){
}
/* --- RESPONSIVE END--- */

上面這些就是用來控制在不同寬度時，部落格該怎麼改變CSS的原始碼。
在這個區塊內對class和id下的任何屬性，都會直接覆蓋原本的CSS設定，所以，當做完電腦版的排版之後，就可以開始進行各個尺寸的設計。

標注各個尺寸對應的結果如下：

/* --- RESPONSIVE start--- */
@media only screen and (max-width:1024px){
//iPad橫著拿（Landscape）的尺寸}
@media only screen and (max-width:979px){
//iPad直著拿（Portrait），和iPhone4以後橫著拿（Landscape）的尺寸}
@media only screen and (max-width:767px){
//iPhone直著拿（Portrait）的尺寸}
@media only screen and (max-width:479px){
//小平板或大手機直著拿（Portrait）的尺寸}
@media only screen and (max-width:319px){
//其他更小的設備，大約是2012年以前的智慧型裝置才會有這種尺寸}
/* --- RESPONSIVE END--- */

所以，依照上面的法則，大概可以這樣設計：

/* --- RESPONSIVE start--- */
@media only screen and (max-width:1024px){
//iPad橫著拿，基本上跟一般筆記型電腦差不多，所以可以讓網站跟電腦版幾乎一樣。側邊欄可以設寬度33%，文章區塊可以設寬度66%。}
@media only screen and (max-width:979px){
//iPad直著拿，可以考慮把側邊欄隱藏起來（dispaly:none;），或是搬移到文章區塊的後面；也可以順便把兩個區塊都弄成寬度100%。}
@media only screen and (max-width:767px){
//iPhone直著拿，可以考慮把側邊欄隱藏起來（dispaly:none;），或是搬移到文章區塊的後面；也可以順便把兩個區塊都弄成寬度100%。}
@media only screen and (max-width:479px){
//小平板或大手機直著拿，可以考慮把側邊欄隱藏起來（dispaly:none;），或是搬移到文章區塊的後面；也可以順便把兩個區塊都弄成寬度100%。}
@media only screen and (max-width:319px){
//其他更小的設備，可以考慮把側邊欄隱藏起來（dispaly:none;），或是搬移到文章區塊的後面；也可以順便把兩個區塊都弄成寬度100%。}
/* --- RESPONSIVE END--- */

範例

以下附上依照上面原則，可能會怎麼做：

/* --- RESPONSIVE start--- */
@media only screen and (max-width:1024px){
.side-wrapper{
width:33%;
}
.main-wrapper{
width:66%;
}
}
//iPad橫著拿，基本上跟一般筆記型電腦差不多，所以可以讓網站跟電腦版幾乎一樣。側邊欄可以設寬度33%，文章區塊可以設寬度66%。

@media only screen and (max-width:979px){
.side-wrapper{
width:100%;
float:right;//為了讓側邊欄出現在文章之後
}
.main-wrapper{
width:100%;
float:left;//為了讓文章出現在側邊欄之前
}
}
//iPad直著拿，把側邊欄搬移到文章區塊的後面；順便把兩個區塊都弄成寬度100%。

@media only screen and (max-width:767px){
.side-wrapper{
display:none;
}
}
//iPhone直著拿，把側邊欄隱藏起來（dispaly:none;），讓手機看的人清爽一點。

@media only screen and (max-width:479px){
}
//小平板或大手機，可以空白，因為比較小的寬度會繼承較大寬度的設定。

@media only screen and (max-width:319px){
}
//可以空白，因為比較小的寬度會繼承較大寬度的設定。

/* --- RESPONSIVE END--- */

後記

其實這是最單純的改變排版位置而已，後續還有更多東西要動，例如Header是否要改變造型或拿掉圖片？選單列要不要改變造型？側邊欄要整個拿掉，還是保留部分項目？之類。而綜合口味這次改成RWD也挖了不少網路上別人RWD範本的原始碼來研究以及直接挖來用。

從別人做好的RWD範本可以看到厲害的人是怎麼規劃RWD這件事的，所以還可以有一個更簡單的方法：就是直接套用別人的RWD範本，再把自己本來的範本想要有的東西加上去XD

最後，說說這次改造RWD的歷程：從2月開始有想要改造，開了另一個Blogger當測試機把舊文章放進去，然後慢慢摸看效果如何。大約4月10日改造完畢，但繼續測試直到4月13日才把測試機搬回正式機，超漫長的啊。

//20140420補充
各位可以看看自從4月13日改成RWD之後對於跳出率的影響，附圖如下：

希望這篇記錄對於也想把Blogger改成RWD的人有幫助囉！

補充

這段原始碼可以讓誤闖m=0的人回到m=1去，讓facebook留言正常顯示！

<script type='text/javascript'>//<![CDATA[
var curl = window.location.href;if (curl.indexOf('m=0') != -1) {curl = curl.replace('m=0', 'm=1');window.location.href = curl;}
//]]></script>