Blueimp 論壇首頁
  首頁  | 討論區  | 最新話題  | 搜尋  | XML  |  登入
博客來購書 | 《主管這樣帶人就對了!》
貝殼鯨魚兒童程式啟蒙(點我去報名)

此話題中所有文章數: 1 [ 話題狀態: 一般 ]
上一話題 此文章已經觀看 4860 次 而且有 0 篇回應 下一話題
會員大頭照
男寶寶 jieh 《騎士團團長》
文章: 6742
v3.8.8

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

又花了兩天大刀闊斧地簡化網站的顯示方式,主要以文章內容呈現為主要方向,其餘各項功能就定位在不同的索引畫面列表,雖然這套 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 貼上的標籤還沒下來,可能還要等上一陣子吧!進入網站看一下,字體確實會自動變大一點,看起來比沒加之前清楚多了,不過還是把手機橫擺著看最舒夫,而且真的比之前好很多!

開心!

通過行動測試的目標也達成了,接下來要多放點時間在內容上囉~
----------------------------------------
支持小惡魔
BTC : 19tn3RnCuwZVukXAwyhDWZD4uBgUZoGJPx
LTC : LTFa17pSvvoe3aU5jbmfcmEpo1xuGa9XeA
知識跟八卦一樣,越多人知道越有價值;知識最好的備份方法,散播!
藍色小惡魔(林永傑): 臉書
----------------------------------------
[編輯文章 15 次, 最後修改: jieh 於 2020/2/5 下午 05:08:43]

[2016/10/29 下午 02:36:28] 友善列印   [返迴此篇文章頂端 ]  回到頂端 
[顯示可以列印的版本]