아이폰, 아이패드 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>
답변 4
메타 태그는
<meta name="viewport" content="width=device-width, initial-scale=1">
이렇게 하시면 되고
css 스타일을 모바일, 피씨 하나로 작업하셨다면 반응형웹으로 하시는 건가요?
그렇다면 모바일 화면 css는 미디어쿼리를 적용하셔야 할것 같군요.
@media (min-width:480px) and (max-width:768px) {
body {background: #fff;}
}
중간 span 요소에 width:4px 로 인해 밀리는겁니다. span 요소도 % 로 잡으셔서
총 합이 100% 나오게 작업하시면 됩니다.
input 과 span에 있는 padding과 margin도 다 빼고 width:1%;로 주었는데도 밀리네요 ㅠㅠㅠ
font size를 em 으로 처리해 보세요.
em으로 해도 안되네요ㅠㅠ 답변 감사합니다.
답변 감사드립니다.
px로 다시 해서 전체 width:320px;에 전화번호칸 각 60px, span 4px로
아이폰에 맞게 임시 수정하니 됩니다..ㅠㅠ 대신 안드로이드 화면에서 지나치게 작게 보이는..
input 상단에 h2로 제목이 있는데 letter-spacing:-1px;도 아이폰은 적용이 안되네요.
padding, margin 다 합쳐도 가로가 300px이 안되는데 어째서 밀리는걸까요.. ㅠㅠ
모바일 화면 시작 코딩은 이렇습니다. 혹시 이부분에서 문제가 있는걸까요?
<? if ( preg_match('/iPhone|Android/',$_SERVER['HTTP_USER_AGENT']) ) { ?>
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=medium-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- ##모바일 -->
.
.
.
.
<!-- ##피씨 -->
.
.
.