近期筆者執行了滿多行動版網頁（Mobile Web），同時也是 RWD 設計的專案。光測不同的瀏覽器（IE 8-11、Chrome、Firefox、Safari）就夠忙了，而行動平台上的各種尺寸、瀏覽器與其他變因更是耗費不少前端工程師的青春…XD
而有時候光用桌面瀏覽器模擬手機瀏覽器，並無法完全真實呈現在行動裝置的情況，所以在開發的過程中使用了許多工具來輔助，在開發期就力求盡量測到（並進而解決）不同裝置的「近似」真實的情況。
以下列出十項，個人覺得還不錯的行動網頁開發輔助工具：
Month: 8 月 2014
在 Android 原生瀏覽器上特別模糊的 SVG 圖片與 workaround
Standard最近在執行的手機版網頁專案，針對其中許多 icons，我都使用了 SVG 圖片來取代高解析裝置下表現地慘不忍睹的 PNG 圖片，銳利的向量圖片放大縮小也不怕，真棒。
但在進行不同裝置的測試時，發現在某些 Android 上用原生瀏覽器瀏覽時，某些 SVG 圖片特別模糊，毛邊都相當明顯，但又不是每張 SVG 圖片都是如此，相當詭異。
舉個例子：
（可點圖放大）
- 左方是正常的情況，SVG 圖檔相當清晰
（Chrome for Android v36） - 右方則是在 Android 原生瀏覽器上的情況
可以注意圖片的邊緣都相當模糊、不銳利
經過比較發現，在我這個專案的情境中，只有被套上 transform: rotate 或 position: fixed，且是 background-image 方式使用的 SVG 圖片會有這個問題。
上 stackoverflow 搜尋看看，果然有類似的問題被提出（雖然提問者的情境與我不同），而也有人提出了 workaround 來暫時解決這個問題。
根據討論串，這應是 Android 原生瀏覽器及 Chrome for Android 25 版之前的 issue，這個 issue 會使符合上述情境的 SVG 圖片，以 CSS 像素的密度（density）被繪製出來，但多數高階 Android 手機中，CSS 的 1px 並不等於裝置的 1px，所以會讓它看起來很模糊。
而討論串中被提到的 workaround 雖然也沒有對為何可以這樣解決的原理做太多解釋，但也滿有意思的，是在 SVG 檔案中嵌入一個透明（opacity=0）的文字物件：
<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>
就可讓 Android 原生瀏覽器/Chrome for Android 正常地繪製符合上述情境的 SVG 圖片，就連 zoom in 也一樣清楚噢。