mobile browser address bar issue
웹 페이지를 퍼블리싱 할 때, 모바일 페이지의 경우 디바이스, 브라우저에 따라서
높이갚 설정이 제대로 이루어 지지 않을 때가 자주 있습니다.
높이갚을 100vh, 100% 등 전체 화면을 컴포넌트가 먹게끔 하고 싶은데 브라우저의 address bar(url bar)의 높이 값이 방해가 되는 경우.
또 스크롤을 하다보면 브라우저의 address bar(url bar)가 숨었다가 나왔다가..
높이값은 계속 변경되고.. 번거롭게 해결하는 경우가 많았는데 CSS만으로 쉽게 해결 할 수 있기에 내용 공유를 해봅니다.
how?
일단 전제는, 아직 vh로 높이값을 계산하는 것은 시기 상조 인 것 같습니다.
아니 앞으로도 vh는 쓰면 안될 것 같아요.
Android 기준 브라우저별 테스트 결과로는
- Chrome : address bar를 포함하지 않은 vh값으로 고정. address bar가 나오면 브라우저 자체가 아래로 밀림
- Kakao : address bar가 노출시, vh 값을 재 계산
- Naver : address bar가 vh 값에 포함되지 않음 (명확하지 않음..)
자주 사용하는 크롬 브라우저가 말썽이네요.. 하지만 의도된 것 이라며 앞으로도 변경할 생각은 없다고 합니다.
그렇다면 해결 방법을 알아 볼까요?
1. 바디 안에 전체 내용을 감쌀 div를 만들어 줍니다.
<body>
<div id="content-wrap"></div>
</body>
2. CSS를 다음과 같이 추가!
* {
margin:0 auto;
padding: 0;
}
html {
widht:100%;
height:99.9%;
overflow:hidden;
}
body {
width:100%;
height:100%;
overflow:hidden;
}
#content-wrap {
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:auto;
}이렇게 하면, content-wrap 안의 내용이 넘쳐서 스크롤을 하게 되더라도
상단의 address bar가 고정 된 채 스크롤이 되는 것을 확인 하실 수 있습니다! (짝짝짝)
3. 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<style>
* {
margin:0 auto;
padding: 0;
}
html {
widht:100%;
height:99.9%;
overflow:hidden;
}
body {
width:100%;
height:100%;
overflow:hidden;
}
#content-wrap {
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:auto;
}
</style>
</head>
<body>
<div id="content-wrap">
줄 수 늘리기 용 <br/>
...
줄 수 늘리기 용 <br/>
</div>
</body>
</html>3. 결과
위 방식으로 기본적으로 세팅을 해 두고 퍼블리싱을 진행 하면 mobile device, mobile browser별 설정을 하시는데 많이 수월 할 거에요.
다만, 위 방식으로 해결 하였을 때 offset scroll top을 이용하는 스크립트가 있으면 계산식을 조금 변경 해 주어야 합니다!
해당 방식으로 모바일 페이지 제작시 골치거리 하나를 덜고 시작하세요!
'Programming' 카테고리의 다른 글
| CKEditor5 - Web Editor CKEditor5 이미지 업로드(For jQuery) (5) | 2022.04.15 |
|---|---|
| [Javascript] mobile touch Event (1) | 2020.12.28 |
| [laravel] laravel8.x social login(google login, kakao login, naver login) (0) | 2020.12.18 |
| Google App Script 시작하기(2) - 외부 프로젝트에서 내가 만든 Google App Script API 호출하기 (0) | 2020.12.17 |
| Google App script 시작하기(1) - Google App script로 API 구현하기 (0) | 2020.12.17 |
