아이폰, 아이패드 css 틀어짐 채택완료

input 칸이 안드로이드와 아이폰일때 다르게 나옵니다.

pc와 아이패드도 동일하게 나와야 하는데  아이패드 역시 밀려서 나옵니다.

혹시 px로 해서 그런가 해서 각 25% 비율을 줬는데도,

가운데 전화번호 적는 칸이 틀어지네요.. 

아이폰에 맞추자니 안드로이드에서 너무 한쪽으로 쏠려나옵니다.

(안드로이드)

(아이폰)

제가 만든 소스가 아니라 가로사이즈 수정만 했습니다.

혹시 문제가 되는 부분이 있을까요? 

<div style="height:40px; ">

  <input type=text  name='wr_1' id='wr_1' required value="010" size="3" class="fom"   maxlength="3" style=" padding-left:8px;font-size:16px; color:#b9b9b9; border:0; width:25%; height:40px; font-size:16px; border-radius:3px; background-color:#fff;" onkeyup="nextBlank(3, this.id, 'wr_2')" />
  <span style="color:#b9b9b9; font-size:15px; display:inline-block; width:4px; margin-right:3px;">-</span>
  <input type=text name='wr_2' id='wr_2' required value="<?=$write[wr_2]?>" maxlength="4" style="width:25%; height:40px; font-size:16px; border-radius:3px; border:0; padding-left:8px; color:#b9b9b9; background-color:#fffr;" onkeyup="nextBlank(4, this.id, 'wr_3')" />
  <span style="color:#fff; font-size:15px; display:inline-block; width:4px; margin-right:3px;">-</span>
  <input type=text name='wr_3' id="wr_3" required value="<?=$write[wr_3]?>" maxlength="4" style="font-family: 'Nanum Myeongjo', serif;width:25%; height:40px; font-size:16px; border-radius:3px; border:0; padding-left:8px; color:#fff; background-color:#fff;" onkeyup="nextBlank(4, this.id, 'wr_5')"  />
  
  </div>