2017年2月1日 星期三

讓每個網頁都能自動調整寬度,省下手動縮放的麻煩﹍Chrome 套件 Zoomy

讓每個網頁都能自動調整寬度,省下手動縮放的麻煩﹍Chrome 套件 Zoomy

Wayne Fu 0 A+
chrome-auto-zoom-page-zoomy-讓每個網頁能自動調整寬度,省下手動縮放的麻煩﹍Chrome 套件 Zoomy使用 Full HD (1920x1080)的寬螢幕後,瀏覽網頁會有個小困擾,需要常常手動按 Ctrl + 放大網站的寬度,否則可視範圍及文字會過小。

如果是常逛的網站,其實調整過一次後,瀏覽器會記住設定,也就麻煩第一次而已。不過如果有這麼一個程式,可以自動偵測網頁寬度,並放大或縮小到螢幕寬度,對於使用者來說,不是非常方便貼心嗎?就不用每次逛到新網站,便需要手動調整大小。

最近下定決心要尋找這樣的程式,是因為使用了雙螢幕,而且兩個螢幕大小不一樣,導致 Chrome 記憶的縮放比例,在不同的螢幕尺寸,仍需要重新調整。若是沒有自動調整網頁寬度的程式,那麼切換螢幕的過程,真會變成整人遊戲!

本篇紀錄了我測試不同 Chrome 套件的心得,就算是沒有操作雙螢幕的使用者,也可以節省許多操作瀏覽器的時間喔。



一、多種 Chrome 套件測試


在 Chrome 商店測試了多種 Zoom 相關的套件,大部分效果都很差,篩選到最後只剩兩個比較有用:

1. Zoomy



這個套件是目前來說效果算比較好的一個,優缺點如下:

  • 根據套件說明介紹,它的功能是可以自動放大網頁到符合螢幕寬度(意思是沒有針對"縮小"網頁來設計)
  • 我的感覺是,某些網頁的寬度判斷上會有錯誤
  • 可以設定不執行的網頁,這是很重要的功能。

由於下一個套件目前還不夠完善,本篇會先說明 Zoomy 的使用技巧。


2. Zoom Page WE


這個套件我認為功能比第 1 個強,但可惜目前還不符合我的需求:

  • 可以放大、也能縮小網頁,以符合螢幕寬度
  • 但是必須手動執行,無法自動執行
  • 不會記憶網頁狀態,每次載入頁面都要重新手動執行

我有留言給作者建議增加自動執行的功能,若將來實現的話,就可以取代 Zoomy 這個套件。



二、Zoomy 效果


chrome-auto-zoom-page-1-讓每個網頁能自動調整寬度,省下手動縮放的麻煩﹍Chrome 套件 Zoomy

上圖是本站還沒安裝 Zoomy 之前,Chrome 瀏覽器的縮放比例設定為 100% 時的畫面。


chrome-auto-zoom-page-2-讓每個網頁能自動調整寬度,省下手動縮放的麻煩﹍Chrome 套件 Zoomy

安裝之後,打開 WFU BLOG 可看到網頁已經自動符合螢幕寬度,不用手動調整。

上圖可看到縮放比例仍然是 100%,代表這個外掛的原理,是利用 CSS 來動態設定網頁寬度

測試了一些常去的網站,例如 Facebook、Stockq,都能自動調整沒什麼問題。



三、如何排錯


1. 縮放出問題的網頁

chrome-auto-zoom-page-3-讓每個網頁能自動調整寬度,省下手動縮放的麻煩﹍Chrome 套件 Zoomy

但不是所有網頁都不會出錯,例如上圖是「Livia's Wonderland」的畫面,雖然 Chrome 一樣是 100% 的縮放比例,但很奇怪最右邊的圖片沒完全顯示,下方的捲軸還可往右捲一段距離。

大致交叉測試後,解決的方法如下:

  • Chrome 會記憶我們逛過的網站,所調整的縮放比例
  • 執行 Zoomy 後,若發現某些網站縮放比例效果不佳,按 Ctrl - 縮小寬度到正常為止
  • 將來再次載入該網站後,縮放比例會被記憶,Zoomy 的縮放效果也會維持正常


2. 小螢幕使用技巧

這部分的心得分享給雙螢幕使用者,如果兩個螢幕大小差很多時,例如我的小螢幕是 1024x768 的黑白螢幕,那麼 Chrome 會記憶縮放比例這件事,變成是感覺很差的體驗。

因為小螢幕調好之後,回大螢幕就亂掉了;等大螢幕調回來,再切小螢幕又不行了,簡直是無間道。

參照第 1 點的原理後,雙螢幕是有解決辦法的:

  • 安裝 Zoomy 後,先在大螢幕開啟常去的網頁
  • 若網頁不正常,則手動調整縮放比例,讓 Chrome 記憶起來
  • 那麼再用小螢幕看時,Zoomy 就能發揮效果,可以顯示正常的寬度比例。

chrome-auto-zoom-page-4-讓每個網頁能自動調整寬度,省下手動縮放的麻煩﹍Chrome 套件 Zoomy

上圖是本站在 1024x768 黑白螢幕的畫面,縮放比例一樣是 100%,Zoomy 正常運作的結果。



四、不執行的網頁


不是每個網頁都適合外掛執行,因為外掛都是用 JS 寫的,有時 JS 會打架、或是引起無法想像的現象。

而使用了 Zoomy 一段時間後,發現只要是頁面有 Iframe,那個 Iframe 的尺寸可能就怪怪的;或是要操作 Iframe 的話,結果可能會不如預期。

例如 Blogger 使用者一定需要在後台作業、或修改範本,但我安裝了 Zoomy 後,編輯範本就很慘了,因為永遠無法選取我想標示的文字,這就是出意外的狀況。


chrome-auto-zoom-page-5-讓每個網頁能自動調整寬度,省下手動縮放的麻煩﹍Chrome 套件 Zoomy

解決方法如上圖,進入 Zoomy 的設定選項畫面,填入所有不執行的網域後,按「Save」即可。

排除 blogger.com 後,就能正常操作 Blogger 範本了。


更多 Chrome 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP