모바일 환경에 맞춰서 반응형으로 웹을 구축하고 배경도 줬는데


막상 실제 모바일에서 input에 입력하려고 하면 가상키보드가 나타나면서 body 자체가 강제로 크기가 바뀌며 배경이 밀리고 하얀화면이 나타난다


이를 해결하기 위해 바디값을 120% 200% 5000% 로 미친듯이 늘리거나 밀리면 안될 부분을 position : fixed 로 고정시키거나


input에 focus가 오면 강제로 크기를 조절시키는 등 별의 별짓을 다 해봤지만 소용이 없던 와중...


한 네이버 블로그의 글을 보고 바로 해결이 되었다.


[출처] [jQuery Mobile] 소프트 키보드 때문에 footer가 위로 올라와 레이아웃이 망가질 때|작성자 아키

(https://blog.naver.com/soulic_/220550333826)


빈 div를 하나 만들고 그 div에 높이를 무조건 화면크기만큼 줘버리는 것


즉,


<body>


<div class="test"></div>


</body>


<style>

.test {

position:fixed;

top:0px;

left:0px;

width:100%;

height:100%;

}

</style>


<script> /* 제이쿼리 사용 */


$(function () {

$(".test").css('height',window.innerHeight);

});

</script>


이렇게하면 가상키보드가 강제로 body를 밀어도 div 가 무조건 화면크기만큼을 차지하고 있기 때문에 레이아웃이 틀어지지 않는다.


다만 배경색이나 이미지를 이것저것 많이 집어넣었다면... 장담 불가


모바일 전용 페이지에 배경을 여러가지 쓸 일이 거의 없겠지만...


그리고 애초에 배경이 흰색(#fff) 라면 밀리든 말든 신경 쓸 필요도 없다. 어차피 흰색이라.................................................................ㅋㅋ...


다 흰색으로 해버리고 싶다 ㅠㅠ 팬톤에서 올해의 컬러로 흰색 지정 안해주려나 순수한 #fff 의 흰색으로 ㅋㅋㅋ

+ Recent posts