가상 키보드가 내 페이지 높이를 변경합니다.

휴대 전화 용 웹 응용 프로그램을 개발 중이며 이상한 문제가 있습니다. 배경 이미지와 페이지 중앙에 입력 필드가있는 단순한 페이지가 있습니다. 문제는 입력 상자를 클릭하고 가상 키보드가 나타나면 배경 이미지와 입력 필드 크기가 나머지 페이지 공간에 따라 다시 계산된다는 것입니다.가상 키보드가 내 페이지 높이를 변경합니다.

원하는 동작은 전체 페이지가 위로 밀리는 것입니다.

The problem, when keyboard pops up

Desired result

PS :

관련 코드가

<html> 
<head> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
    <style type="text/css">.location_input__LocationInputStyle___2cLQ9 { 
     position: absolute; 
     width: 85%; 
     height: 10%; 
     top: 45%; 
     left: 50%; 
     transform: translate(-50%); 
     background-color: transparent; 
     border-radius: 50px; 
     border: 3px solid #ffffff; 
     text-align: center; 
     font-size: 22px; 
     color: #ffffff; 

    } 
    </style> 
    <style type="text/css">.home_page_container__HomePageStyle___2f5vW { 
     position: relative; 
     width: 100%; 
     height: 100%; 
     background-image: url(86349e48855062e70072f79443fe0af6.jpg); 
     background-repeat: no-repeat; 
     background-size: cover; 
     background-position: 40% 0; 
    } 
    </style> 
</head> 
<body> 
<div id="app"> 
    <div class="home_page_container__HomePageStyle___2f5vW"> 
     <input type="text" class="location_input__LocationInputStyle___2cLQ9" placeholder="Address"> 
    </div> 
</div> 
</body> 
</html>

관련 이미지 (내가 함께 개발하고 있어요 그러므로 이상한 이름, 반응) 디버거와 함께 연주 후 조금, 나는 그것이 고정 된 픽셀 높이로 내 애플 컨테이너/body/html의 높이를 설정하면 발견되지 않는다. 높이가 뷰포트의 100 %가되기 때문에 좋은 해결책은 아닙니다 (모든 장치와 호환 될 수 있도록).

어떻게 제대로 수정합니까?

출처

2017-03-24 Ofir P

이것은 키보드가 숨겨져있을 때의 앱입니다 : [키보드가없는 앱] (http://imgur.com/a/9bISr) –

키보드 div의 최소 높이를 지정할 수 있습니다.
height:100%; 대신에 vh (뷰포트 높이, input div : 50vh,keyboard :50vh 등)으로 텍스트 부분과 키보드 부분을 나눠 볼 수도 있습니다. 다른 높이는 모두 제거하십시오.

출처

2017-06-05 10:43:44

가상 키보드가 내 페이지 높이를 변경합니다.

답변

관련 문제