2016年10月29日 星期六

網站通過行動裝置相容性測試

又花了兩天大刀闊斧地簡化網站的顯示方式,主要以文章內容呈現為主要方向,其餘各項功能就定位在不同的索引畫面列表,雖然這套 mvnForum 論壇網站程式不是部落格,但不想放棄原來所有文章的連結搜尋引擎成績,只好繼續硬著頭皮改...

其中本以為最困難麻煩的就是通過 Google 工具的:行動裝置相容性測試

藍色小惡魔 - 魔窟Google 搜尋結果下,會被標示一段文字「您的網頁不適合使用行動裝置瀏覽。」

Google 真的管很多,硬是要逼著你改善>"<~
您的網頁不適合使用行動裝置瀏覽。
本來覺得要把整個網站改到能通過 Google 行動裝置相容性測試是一件很浩大的工程,所以就一直拖著想放到最後有時間再來處理,正想把簡化後的成果發佈,突然想說至少再回到 Google 檢測工具知道還要改善的項目有多少,結果這次跑出來沒有之前那麼慘,只有以下三項問題...

文字太小,不易閱讀
連結之間距離太近
未設定行動版檢視點
行動裝置相容性測試(失敗)
技術上不難,只是可能需要一些苦活要幹,不過就看看 Google 建議的做法有哪些,也許有幫助~
選擇行動版網站配置:3 種行動版網站實作方法
看一看這個表的結論是:回應式設計是 Google 建議採用的設計樣式。

我馬知道...只是我這個 mvnForum 古老的版本哪懂這東西勒!不過上面這個表看起來有密技的樣子,意思是選擇這個方式「網址保持不變」以及「HTML 保持不變」... 這是 RWD 的特色,不過 Google 這張表看起來的意思是,選擇 RWD 的話可以讓小惡魔的老網站保持網址不變,而且也不要去改 HTML...耶!?

後面的過程就簡單帶過,總之,順這 Google 的指引,意思就是在 head tag 之間加入以下 meta tag 內容就好了!

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

ㄜ...小惡魔半信半疑地加上去之後,再測試一遍...哇哩勒~~過了!
行動裝置相容性測試:成功!
再回到手機搜尋,被 Google 貼上的標籤還沒下來,可能還要等上一陣子吧!進入網站看一下,字體確實會自動變大一點,看起來比沒加之前清楚多了,不過還是把手機橫擺著看最舒夫,而且真的比之前好很多!

開心!

通過行動測試的目標也達成了,接下來要多放點時間在內容上囉~

沒有留言:

張貼留言