|
|
|
mvnForum » 列出所有討論區 » » 討論區: 本站公告 » » » 話題: 網站通過行動裝置相容性測試 |
|
| 列印 2024/4/20 上午 07:25:33 | 在同一個網頁中顯示這個話題的所有文章 |
| 文章作者 jieh 於 2016/10/29 下午 02:36:28 |
網站通過行動裝置相容性測試<span style="font-size: large;">又花了兩天大刀闊斧地簡化網站的顯示方式，主要以文章內容呈現為主要方向，其餘各項功能就定位在不同的索引畫面列表，雖然這套 <b>mvnForum</b> 論壇網站程式不是部落格，<span style="color: #0b5394;">但不想放棄原來所有文章的連結<b>搜尋引擎</b>成績，只好繼續硬著頭皮改...</span></span> <span style="font-size: large;">其中本以為最困難麻煩的就是通過 <b>Google 工具</b>的：<b>行動裝置相容性測試</b></span> <span style="font-size: large;"><b>藍色小惡魔 - 魔窟</b> 在 <b>Google 搜尋</b>結果下，會被標示一段文字「<b>您的網頁不適合使用行動裝置瀏覽</b>。」</span> <span style="color: #0b5394; font-size: large;"><b>Google</b> 真的管很多，硬是要逼著你改善>"<~</span> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-WlgnhTc-JDY/WBQ4CtjyvCI/AAAAAAAAOl8/B52yKDiG7TIsqDsj9TEJOnR1FzYrHQOWQCK4B/s1600/FullSizeRender.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://3.bp.blogspot.com/-WlgnhTc-JDY/WBQ4CtjyvCI/AAAAAAAAOl8/B52yKDiG7TIsqDsj9TEJOnR1FzYrHQOWQCK4B/s400/FullSizeRender.jpg" width="268" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">您的網頁不適合使用行動裝置瀏覽。</td></tr> </tbody></table> <span style="font-size: large;">本來覺得要把整個網站改到能<b>通過 Google 行動裝置相容性測試</b>是一件很浩大的工程，所以就一直拖著想放到最後有時間再來處理，正想把簡化後的成果發佈，突然想說至少再回到 <b>Google 檢測工具</b>知道還要改善的項目有多少，結果這次跑出來沒有之前那麼慘，只有以下三項問題...</span> <span style="font-size: large;"><span style="color: red;">Ｘ</span>文字太小，不易閱讀</span> <span style="font-size: large;"><span style="color: red;">Ｘ</span>連結之間距離太近</span> <span style="font-size: large;"><span style="color: red;">Ｘ</span>未設定行動版檢視點</span> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-xTwBVi2Vp30/WBQ5vFZOr6I/AAAAAAAAOmI/F0hKjXxXRh8t6nz3EPZ4uB8v2GChSYTeACK4B/s1600/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7%2B2016-10-29%2B13.53.09.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://1.bp.blogspot.com/-xTwBVi2Vp30/WBQ5vFZOr6I/AAAAAAAAOmI/F0hKjXxXRh8t6nz3EPZ4uB8v2GChSYTeACK4B/s320/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7%2B2016-10-29%2B13.53.09.png" width="194" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">行動裝置相容性測試(失敗</td></tr> </tbody></table> <span style="font-size: large;">技術上不難，只是可能需要一些苦活要幹，不過就看看 Google 建議的做法有哪些，也許有幫助~</span> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-ccPlfAojeGw/WBQ6zYJNYyI/AAAAAAAAOmU/h86Nr9jk0bMYeJQABjBI4AGQdpOjbfv8gCK4B/s1600/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7%2B2016-10-29%2B13.42.38.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://1.bp.blogspot.com/-ccPlfAojeGw/WBQ6zYJNYyI/AAAAAAAAOmU/h86Nr9jk0bMYeJQABjBI4AGQdpOjbfv8gCK4B/s400/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7%2B2016-10-29%2B13.42.38.png" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">選擇行動版網站配置：3 種行動版網站實作方法</td></tr> </tbody></table> <span style="font-size: large;">看一看這個表的結論是：<b>回應式設計</b>是 Google 建議採用的設計樣式。</span> <iframe id="autoframe0" src="https://www.imp.idv.tw/include/imp/powerad.jsp?site=imp&idx=0&kind=2" width="100%" height="338" style="border:0px;" scrolling=no></iframe> <span style="font-size: large;"><span style="color: #0b5394;">我馬知道...只是我這個 <b>mvnForum</b> 古老的版本哪懂這東西勒！</span>不過上面這個表看起來有密技的樣子，意思是選擇這個方式「網址保持不變」以及「HTML 保持不變」... 這是 RWD 的特色，不過 Google 這張表看起來的意思是，選擇 RWD 的話可以讓小惡魔的老網站保持網址不變，而且也不要去改 HTML...耶!?</span> <span style="font-size: large;">後面的過程就簡單帶過，總之，順這 <b>Google</b> 的指引，意思就是在 <b>head tag</b> </span><span style="font-size: large;">之間加入以下 <b>meta tag</b> 內容就好了！</span> <span style="color: #38761d; font-size: large;">＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞</span> <span style="color: #0b5394; font-size: large;">ㄜ...小惡魔半信半疑地加上去之後，再測試一遍...哇哩勒~~過了！</span> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-sF5OQRR7nJw/WBQ9vSnaEBI/AAAAAAAAOmg/0SPAQ_swdlIM6TwvW-q1cm5LLK_5jd2qwCK4B/s1600/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7%2B2016-10-29%2B11.17.07.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://2.bp.blogspot.com/-sF5OQRR7nJw/WBQ9vSnaEBI/AAAAAAAAOmg/0SPAQ_swdlIM6TwvW-q1cm5LLK_5jd2qwCK4B/s400/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7%2B2016-10-29%2B11.17.07.png" width="380" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">行動裝置相容性測試：成功！</td></tr></tbody></table> <span style="font-size: large;">再回到手機搜尋，被 Google 貼上的標籤還沒下來，可能還要等上一陣子吧！進入網站看一下，字體確實會自動變大一點，看起來比沒加之前清楚多了，不過還是把手機橫擺著看最舒夫，而且真的比之前好很多！</span> <span style="font-size: large;">開心！</span> <span style="font-size: large;">通過行動測試的目標也達成了，接下來要多放點時間在內容上囉～</span> ---------------------------------------- 支持小惡魔 BTC : 19tn3RnCuwZVukXAwyhDWZD4uBgUZoGJPx LTC : LTFa17pSvvoe3aU5jbmfcmEpo1xuGa9XeA 知識跟八卦一樣，越多人知道越有價值；知識最好的備份方法，散播！ 藍色小惡魔(林永傑)： 臉書 |