前言
- 因為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--- */
在這個區塊內對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--- */
後記
最後,說說這次改造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>
參考
前端觀察:響應式網頁設計
Google:responsive blogger
50+ Best Free Responsive Blogger Templates