如何設定行動版 Blogger

最近在 Google 的 Search console 的行動裝置相容性測試，一直 會出現警告訊息，如下面所示:

主要顯示3個問題 :

1. 未將可視區域設為「device-width」
2. 文字太小，不易閱讀
3. 可點選的元素之間距離太近

結果我真的就是一個一個網頁針對上面的問題去做修正，例如第一個問題，我參考了Responsive Web Design 基礎 : 設定，在好幾篇文章設定如下語法:

結果設完後 Blogger 直接把上面語法拿掉，讓人摸不著頭序(各位可以試試看，在 Blogger 貼上此語法儲存文章， Blogger 會自動把此文字刪除)。第二個問題，就一直調到文字大小到最大，結果還是顯示文字太小。到後來才發現，原來 Blogger 有提供行動版選項，直接到 Blogger 後台主題，於右上角進階設定選擇，行動裝置設定選項，如下圖所示 :

 此時會跳出畫面供我們選擇所要的行動版主題，選好後右手邊會有一個 2D Code，供我們確掃描在手機上確認。

下面為在手機確認畫面，如果覺得沒問題，就在上面畫面選擇儲存，就設定完成了。

這時在到 Search console 的行動裝置相容性測試，測試結果即為正常，如下圖所示 :

事實上，Blogger 在處理行動版網頁跟視窗版網頁時，設定是不一樣的，視窗版網址如下:

https://ghl0506.blogspot.com/2013/01/blog-post.html

或

 https://ghl0506.blogspot.com/2013/01/blog-post.html?m=0

行動版網址則為以下網址:

 https://ghl0506.blogspot.com/2013/01/blog-post.html?m=1

差別就在於 ?m=0 或 ?m=1 的設定，在行動裝置觀看時，Blogger 會引導到 ?m=1 結尾的網址。