아이폰, 아이패드 css 틀어짐

아이폰, 아이패드 css 틀어짐

QA

아이폰, 아이패드 css 틀어짐

본문

 

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

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

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

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

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

 

 

(안드로이드)

32469529_1584496800.8217.jpg

 

 

(아이폰)

32469529_1584496804.3635.jpg

 

 

 

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

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

 

 

<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% 나오게 작업하시면 됩니다.

font size를 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">

<!-- ##모바일 -->

.

.

.

.

 

<!-- ##피씨 -->

.

.

.

답변을 작성하시기 전에 로그인 해주세요.
전체 953
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT