一些在手機上 CSS 的小細節

慢慢累積這篇文章的內容。

簡述

這篇預期會把之後碰到的問題都寫在這，希望能解決寫 RWD 時的地雷。

• 在 IOS 上的 <button> 的字體跟色彩與眾不同，建議加上這兩個：

font-family: inherit;
font-size: inherit;

• 在手機板上的 <input> 要特別注意文字大小，如果 <16px 就會在 :focus 時自動縮放（Zoom），建議加上：

font-size: 1em;

• 如果想讓 <input> 有 :focus 邊框加深效果，建議用 box-shadow 來設：

input:focus {
  outline: 0; 
  box-shadow: 0 0 0 1px blue;  
}

這樣子做可以避免 outline 在不同瀏覽器上的樣式問題。還有圓角 bug。