スマホではとっても楽になる
css3のbox-sizingプロパティ。 


box-sizing:border-box

とすると、paddingとborderをwidthやheightの中に含めてくれます。

心置きなく

width:100%;
padding:10px;

とかできます。 


でも、androidだと、box-sizingがそのままではうまくいかない。
(バグではないですけど)

androidの場合はwebkitのベンダープレフィクスをつければOK

box-sizing:border-box;
-webkit-box-sizing:border-box;
 
他にもこの手のcss3 の解決法はありそう。
困ったらとりあえずベンダープレフィックスをつけてみるというのもひとつですね。