94. (TWOK/LOGIC) [Web] 모바일 브라우저 가상 키보드 CSS 화면 밀림 및 축소 현상 px 크기 재설정 로직

---

[로직 정리]

​

정리 로직 : Web

​

상태 : [Web] 모바일 브라우저 가상 키보드 CSS 화면 밀림 및 축소 현상 px 크기 재설정 로직

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

- 모바일 화면 기준 웹 프론트 제작 필요 (HTML , CSS , JS)

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

1. 웹 프론트에서 반응형 디자인은 위해 CSS 설정 시 컴포넌트 사이즈 각 % 퍼센트 단위 설정 수행

    html, body{
        width : 100%;
        height : 100%;
        margin : 0;
        padding : 0;
        border : none;  

        /* 배경 색상 지정 */
        background-color: #bbbbbb;
        
        /* 스크롤바 표시 지정 */
        overflow : hidden;

        /* 모바일 웹 브라우저 당겨서 새로고침 막기 */
        overscroll-behavior: contain;
    }


2. 자바스크립트 <script> 단에서 window.onload 웹 페이지 로드 완료 이벤트 감지 부분에서 CSS 속성 값을 px 단위로 다시 설정 수행

    window.onload = function() {

        var containerBody_height = window.getComputedStyle(document.body).height; //px height 값 확인
        document.body.style.height = containerBody_height; //px 값으로 height 지정

    }


3. 웹 프론트 화면에서 특정 Input 태그 포커스 활성 수행 및 가상 키보드 표시 확인


4. 웹 프론트 화면 UI 가 밀리거나 축소 되지 않고 가상 키보드가 UI 위에 정상 표시 된 것 체크

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

[Web : keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법]

https://blog.naver.com/kkh0977/222416500563?trackingCode=blog_bloghome_searchlist


[Android : Activity 설정 시 화면 세로 고정 , 키보드 UI 밀림 방지 , 액티비티 초기화 방지 설정]

https://blog.naver.com/kkh0977/222506153130?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------
​

---

​