①横向きにしたときに文字が大きくならないように

 

iPhoneは、横向きにしたときに、自動的に文字が大きくなる。

それを解消するために、

 

body{ -webkit-text-size-adjust : none; }

 

 

②paddingやborderを考えないようにする

 

box-sizing : border-box ;を指定すると、ボーダーがあろうとパディングがあろうと、要素全体の横幅は指定した値になります。

 

#box{

padding:0 10px;

border-left:1px;

width:50%;

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;

}

※Android 2.3以下では-webkit- prefixが必要

 

 

③横に並べるときのWidthの値は、5%刻みで

 

3つのボックスを横に並べる場合など、Widthを％指定にするとき、5％刻みにしないと、

横表示したときに隙間ができる