目前位置: 首頁 > HTML5、CSS3、其他 > 網頁不適合透過行動裝置瀏覽 如何解決?

網頁不適合透過行動裝置瀏覽 如何解決? 超大 稍大 微大

原來如此 發表於: 2019-02-24 最後更新:2019-02-25

今天在 Google 的搜索結果中看到 we-shop.net 的網頁竟然被 Google 標示為【網頁不適合透過行動裝置瀏覽】,怎麼會這樣?然而用手機打開顯示錯誤的網址一切正常,和用電腦瀏覽並沒有什麼特別差異
網頁不適合透過行動裝置瀏覽

多次調整了 css 間距設定,再次進入【行動裝置相容性測試】頁面,結果還是顯示【可點選的元素之間距離太近】,浪費了不少時間
網頁不適合透過行動裝置瀏覽
網頁不適合透過行動裝置瀏覽

錯誤提示主要有三種:分別為【內容寬度超出螢幕顯示範圍】、【可點選的元素之間距離太近】、 【使用不相容的外掛程式】,其中【使用不相容的外掛程式】似乎是頁面嵌入 Flash 媒體的緣故,換成 html5 的格式就可以了,但是【內容寬度超出螢幕顯示範圍】、【可點選的元素之間距離太近】,Google 的 Search Console 說明有看沒有懂,最後還是在網路上找到原因,如果測試工具無法載入網頁使用的資源,包含的外部資源,例如圖片、cssjs 檔案。

發生這種情況的可能原因如下:
1.資源未在合理的時間內載入完成。
2.資源未出現在指定位置 (404 錯誤)。
3.未登入的使用者無法存取資源。
4.Robots.txt 檔案禁止 Googlebot 存取資源。

前三項已經確定不可能,於是針對第四點加以修正,過程如下:
A、進入 Google 的 Search Console 之後,編輯 robots.txt 的內容,加入允許檢索的檔案路徑,例如:Allow: /public/js/*.js、Allow: /public/css/*.css、Allow: /themes/weshop2018/style.css,然後【提交】robots.txt
網頁不適合透過行動裝置瀏覽

B、從彈出的視窗下載新的 robots.txt,並上傳至伺服器,然後【提交】通知 Google 更新
網頁不適合透過行動裝置瀏覽

C、再次進入【行動裝置相容性測試】頁面並輸入測試網址,結果便如預期...
網頁不適合透過行動裝置瀏覽
網頁不適合透過行動裝置瀏覽

若要發表問題請至留言板提問!