2020年4月16日 星期四

如何設定行動版 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 結尾的網址。

沒有留言:

張貼留言