2017年5月3日 星期三

Sizzy 線上測試自適應設計 RWD 在各種 iOS、Android 行動裝置顯示效果

Sizzy 線上測試自適應設計 RWD 在各種 iOS、Android 行動裝置顯示效果

這幾年台灣行動裝置普及率已經非常高,幾乎可以說人手一機,無論是連接社群網站、即時通訊應用或上網查資料可能都會透過手機或平板電腦。對於網站管理者而言,你絕不能輕忽行動裝置使用者為網站帶來的流量。Google 很早以前就告訴你,必須重視行動用戶體驗,從「Google 幫你測試網站是否對行動裝置友善,三項評比指標提供最佳化指南」一文介紹的工具即可快速測試你的網站能否符合當前趨勢。

至於要如何使你的網頁獲得 Google 或其他搜尋引擎的青睞呢?簡單來說讓網頁可以被行動裝置正常瀏覽第一步,也就是顧及各種使用者瀏覽體驗,實作的方法很多,包括行動版頁面、自適應網頁設計(Responsive Web Design,簡稱 RWD),不過太過技術性的內容就不在本文詳細介紹,但至少你必須知道:我的網頁能不能被行動裝置使用者正常瀏覽?

如果你的網站、部落格和免費資源網路社群一樣,採用「自適應網頁設計」方式來讓各種螢幕大小可以正確瀏覽的話,不妨試著使用本文介紹的這款免費工具測試成效。

Sizzy

Sizzy 是一款免費自適應網頁設計線上測試服務,簡單來說,輸入要測試的網址,Sizzy 會開啟各種行動裝置瀏覽網頁的實際情形,讓開發者測試在不同螢幕尺寸情況下網頁顯示效果如何,同時還能選擇要測試的裝置類型(iPhone、iPad 或 Android Phone)、直式或橫放顯示,對於開發者來說是非常值得加入書籤作為開發測試用的工具,特別是你手邊沒有那麼多種裝置時。

網站名稱:Sizzy
網站鏈結:https://sizzy.co/

使用教學

STEP 1

開啟 Sizzy 網站後輸入要測試的網站鏈結,點擊右側按鈕送出就能開始使用,要注意的是你的網站不能有類似移除框架的程式碼,否則就會自動跳轉回原始頁面而無法測試。

Sizzy

STEP 2

Sizzy 測試工具會顯示各種常見的行動裝置、尺寸大小,從上方選單中央的幾個圖示能設定要單獨顯示 iOS 或 Android 裝置(蘋果和機器人圖案),也能選擇顯示手機或平板電腦的預覽畫面。

Sizzy

STEP 3

最棒的是 Sizzy 不是只有給你看第一頁擷圖,因為這無法真正對網頁設計進行全面性的測試或除錯,使用者真正可以去操控每個畫面來實際檢視「自適應網頁」在各種裝置的呈現效果。

不過 Sizzy 並不能真正完全模擬行動裝置瀏覽的樣式,除非另外使用更改 User-Agent 的瀏覽器外掛才行,若有類似需求,我建議可參考「Responsive Web Design Tester 響應式網頁開發工具,在瀏覽器測試網站顯示效果」一文。

Sizzy

STEP 4

從右上角可調整不同的顯示比例,預設值為 100%,此外,還有選項可快速將裝置橫放顯示,如果在測試時需要知道裝置橫放時較寬尺寸顯示出來的效果如何,Sizzy 亦有內建這項功能,可善加利用。

Sizzy

之前還介紹過另一類似工具「Multi Screen Test 測試網頁在不同裝置、螢幕解析度顯示效果」,不同的是 Multi Screen Test 允許使用者自定裝置的畫面大小,Sizzy 僅可使用內建裝置尺寸。

喜歡 Sizzy 線上測試自適應設計 RWD 在各種 iOS、Android 行動裝置顯示效果 嗎?歡迎將免費資源網路社群加入書籤,以 FacebookTwitterGoogle+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。



from 免費資源網路社群 https://free.com.tw/sizzy/

沒有留言:

張貼留言