Responsive Design Blogger 經驗談
前言
- 因為Blogger的手機版範本無法加入手機圖標（apple-touch-icon）。
- 如果用手機版範本，那麼部落格的網址會不一樣，網址後面會多加「?m=1」。
- 網址不一樣會連帶影響：用手機看的人分享網址後，由於網址後面加了「?m=1」，所以用電腦點網址的人會看到手機版網頁而不是電腦版網頁。
- 如果是用手機版範本的話，想在手機上看電腦版就要手動把網址改成「?m=0」，但那會令抓網址的facebook留言消失。
基於以上原因，捨棄Blogger內建的手機版範本，改用RWD範本我覺得有必要性～
製作RWD的網站之前，可以先好好想想並規劃一下：
- 真的需要RWD嗎？如果只需要Blogger的文章跟內建留言，可以用行動版範本就好XD
- 如果需要，那有哪些元素在行動裝置上想要被保留下來？
- 可以在行動裝置上捨棄掉哪些元素？
推薦
Google Crome、Firebug、Safari⋯⋯等等有開發工具的瀏覽器都很好用，用來查某個區塊的class、id，或直接試著改參數都超方便。
然後務必使用Resizer這個書籤小工具，有助於簡易測試各種環境下的變化～
再來就是最好有平板和手機可以實機測試，不過那是Resizer測試完之後才要做的事了。
方法
首先，在<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--- */
/* --- 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--- */
後記
網路上別人RWD範本
最後，說說這次改造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>