TShopping

 找回密碼
 註冊
搜索
查看: 651|回復: 1

[分享] Responsive Design (RWD) 響應式網頁設計測試要點

[複製鏈接]
發表於 2014-10-22 16:44:06 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
注意 本文章並非 RWD 技術教學,此為針對已經會做 RWD 的設計師,完成後的檢查列表。
新手 可以看一下什麼是 RWD, 中文
1. 視窗與容器
  • 檢查各寬度是否有橫向 scrollbar(捲軸)出現,若有則檢查是什麼元素凸出容器
  • 檢查是否有 1px 誤差的 media query 設定,如 min-width, max-width 都設為同樣的寬度,就可能出現此跳動問題(此問題在舊版的 bootstrap 也曾發生過
  • 檢查有設定 position: fixed; 的元件,需檢查最小寬度與最小高度是否會被隱藏導致無法操作,或反過來佔有過多螢幕空間導致遮蔽太多內容區域
2. 文字
  • 標題斷行狀況,可參考 macho.js 或是 balance-text
  • 設定斷行禁則,例如公司名稱或不可斷句之處可以設 white-space: nowrap;
  • 過長連續文字,例如網址過長超出畫面是否有設定 word-break: break-all;
  • 透過 media query 設定 br { display: none; } 也可改變不同寬度不斷行的方法
  • 內文一行是否超過 25—30 字難以閱讀,超過則視情況放大字體,若不及則縮小字體。
3. 圖片
  • img 元件若超出內容框 是否會隨容器寬度縮小,視情況設定為 width: 100%;或 max-width: 100%;
  • img 標籤若有指定 height 是否有被 css 重設為 height: auto;
4. 常用 plugin
  • 任何的互動如有 hover 才動作的設定,改為其他方式
  • 互動按鈕是否夠大足以讓手指瞄準該按鈕
  • 過度消耗 CPU, GPU 資源的特效需偵測 user-agent 為桌面瀏覽器才做,或使用有相同意義的圖片取代
  • 如有使用類似 Scroll To Fixed 的固定方式,視情況在 mobile 取消或隱藏
  • js 簡易偵測方式偵測 user-agent 或使用 Modernizr
  • 取消類似 lightbox 滿版效果,或是特別設計手機版呈現方式
  • 社群媒體如 facebook 的分享元件寬度是否會超出版面
  • 社群媒體 embed 的 iframe 高度是否有垂直跳動問題,可透過 min-height 解決
  • 第三方廣告 embed 的 flash 或是 iframe 是否處理妥當或隱藏
5. Media測試方式
  • 手動縮放測試的瀏覽器寬度與高度
  • 使用 縮放補助工具 / bookmarklet
  • 多個實體裝置,使用 fire.app 的 auto livereload
  • 安裝 Xcode 開啟 iOS simulator
  • 安裝 Android SDK
縮放補助工具不支援 media query 的瀏覽器
  • IE 8 以前
  • firefox 3 以前
  • safari 3 以前
  • Opera 9 以前
解決方案 Respond


 

臉書網友討論
發表於 2015-7-28 17:43:15 | 顯示全部樓層
非常感谢啊!












择天记

版主招募中

您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-3 11:53 , Processed in 0.056741 second(s), 21 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表