在進行切版作業過程, 都是用Chrome來做檢閱開發
趕趕趕的日子好不容易檔案交出去了！！！！
接著讓身、心、靈享受最放鬆的一刻，就是客戶、老闆或PM
還在確認是否有BUG的那段時間了！

坐在椅上蹺著腳、聽著音樂
拿起手機.....滑丫滑....滑丫滑......
以前做過簡單的QA，這時就把這精神拿出來用！
用不同的連結方式做網頁測試，並享受這近一個月努力的成果
看著每個點擊所呈現的畫面、效果內心滿滿澎湃著
確定著視覺是否符合設計指定的需求，同時注意細節。

• 連結丟到 → Line (連結開啓)
• 連結丟到 → Wechat (連結開啓)
• 連結丟到 → Chrome
• 連結丟到 → Safari

然後就......

iOS/Safari 上出現的小事件，但卻是UI/UX的大事!

....人生......好難......

以下是這週在做網頁BUG修改時遇見的手機版 safari 小BUG:

問題(UI)：input 小圓角？

在chorme好好又美美直角的按鈕、input輸入框
結果在手機用safari檢閱RWD時...出現了圓角！＠＠！？
如下圖：

在網上查了資料，還好有有人分享
Safari 看網頁時一些輸入框都會變成帶圓角的顯示，如果希望頁面在所有瀏覽器上看的效果一致，可關閉這個圓角特性。只需要給input 或者textarea 增加如下CSS 即可：

-webkit-appearance: none; 
border-radius: 0;

輸入了這二行資料！解決了小小UI上美感的問題

問題(UX)：hover偽類在手機上需點擊2次才可連結？

這個問題比較麻煩，網路有挺多解法可以參考
(資料一併提供至下方參考資料，有需要的朋友哇可以看看研究啦)

我考量到只有一頁設計才有這問題，
因此選擇了只要在body上網绑定一个空的touchstart事件的做法：

document.body.addEventListener("touchstart",function(){ });

然後畫面就正常了！！！！ya!!!!

但有人似乎有說這做法好像有問題，
而我能力尚未看出有何不妥，如果有大大們看到這做法，知道原因的話再麻煩留言賜教
謝謝各位看官們....^0^

參考資料

• 為什麼/什麼時候我必須點擊兩次才能觸發iOS上的點擊？
• 解决 iOS 设备上链接要点击两次才跳转的问题
• The Annoying Mobile Double-Tap Link Issue
• 解决:hover伪类在移动端二次点击的问题