키보드를 표시 할 때 레이아웃을 변경하지 않는 방법은 무엇입니까?

저는 Cordova (아래 코드)에서 실행되는 html 앱의 장난감 예제를 가지고 있습니다.이 예제는 뷰포트 크기에 상대적인 모든 것으로 배치됩니다 (위치 : 절대 및 백분율 또는 글꼴의 vh 단위).키보드를 표시 할 때 레이아웃을 변경하지 않는 방법은 무엇입니까?

예기치 않게 키보드가 표시되면 뷰포트가 수직으로 축소되어의 두 번째 스크린 샷에 표시된 레이아웃이됩니다.

;

초기 레이아웃이 뷰포트의 전체 너비/높이와 관련하여 여기에있는대로 정확히 수행되지만 키보드가 표시 될 때 크기가 변경되지 않기를 바랍니다. 오히려 그것은 키보드가 나타나기 전과 같이 키가 유지되어야합니다.

어떻게하면됩니까?

HTML/CSS 코드 :

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 

<style type="text/css"> 

.main { 
    font-size: 4vh; 
    color: #000000; 
    position:absolute; 
    top:12%; 
    left:5%; 
    width:90%;" 
} 

.button { 
    background: #006000; 
    font-size: 4vh; 
    color: #FFFFFF; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position:absolute; 
    top:85%; 
    left:0%; 
    width:100%; 
    height:15% 
} 

html,body { 
    height: 100%; 
    width:100%; 
    background-color:#FFFFFF; 
    overflow: hidden; 
} 

</style> 
</head> 
<body> 

<div class="screen"> 
    <div class="main"> 
    Type in something:<br/><br/> 
    <input type="text"> 
    </div> 

    <div class="button"> 
    Next 
    </div> 
</div> 



</body> 
</html>

P.S. 보기가 자동으로 스크롤되어 선택한 입력란이 보이지만 별개의 질문입니다.

환경 : Cordova 5.1.1, Android SDK 23, Ubuntu 14.04에서 실행중인 Android 에뮬레이터.

출처

2016-09-15 Alex I

에서 봐 주시기 바랍니다.

platforms/android/ 폴더로 이동하십시오.
열기 AndroidManifest.xml 파일 <activity> 소자에서
더 읽을 "adjustPan"

문서 "adjustResize"android:windowSoftInputMode에서 값을 변화 here를 찾을 수있다.

예를 들어 ionic과 같은 UI 프레임을 사용하고 과 같은 cordova-plugins을 추가하는 것이 좋습니다. 더 나은 키보드 처리 (Cordova UI docs).

출처

2016-09-15 07:24:46 Beat

위대한 작품! 그것은 코르도바에 대한이 질문에 대한 표준적인 대답이어야합니다. 나는 그것이 upvotes의 톤을 얻을 희망 :) –

VH는 화면 크기에 따라 작동하므로 글꼴 크기 및 높이를 "VH"가 아닌 PX 형식으로 지정해야합니다. PX를 사용하여이 문제를 해결했습니다.

하기가 AndroidManifest.xml에 android:windowSoftInputMode에 대한 값을 변경해야 할 코드 펜

출처

2016-09-15 07:12:48

http://codepen.io/santoshkhalse/pen/YGqZqR –

안녕하세요 Santosh, 고맙습니다.하지만 모든 레이아웃은 처음에는 뷰포트 크기 (글꼴 크기 등 포함)에 상대적으로 수행해야합니다. 난 그냥 * 초기 레이아웃 * 후에 변경하지 싶습니다. 이는 해상도가 매우 다른 기기에서 사용되므로 픽셀 크기가 제대로 작동하지 않습니다. –

onFous jQuery를 작성할 수 있습니다. 의미는 입력 시간에 초점을 맞춰야 할 때 CSS가 제공 될 때 (PX에서) 블레어가 VH 일 것입니다. –

키보드를 표시 할 때 레이아웃을 변경하지 않는 방법은 무엇입니까?

답변

관련 문제