모바일 웹 페이지 height…

조회 67

안녕하세요 현재 vue.js로 웹페이지 개발중인데요 모바일 페이지 만들던 중 크롬 개발자도구로 모바일 사이즈 맞춰서 원페이지로 반응형 작업하고있는데 실제 모바일로 보니 상단 url창과 하단 앞뒤 버튼 때문에 100vh로 만든 사이즈가 틀어지더라구요 ㅠㅠ 구글 찾아보고 100%로도 바꿔보고 style에 root 지정해서 js로 vh 변수 셋팅해보고도 했는데 도저히 안되서 글 남겨봅니다ㅠㅠ 다른 방법이 뭐가 있을까요..?

구체적이고 정성스러운 질문에 Up 투표를 눌러주세요.

설명이 부족한 질문에 Down 투표를 눌러주세요. 커리어리가 질문자에게 수정을 요청할게요.

답변 3

프레드윰님의 프로필 사진

뭔가 봐야 알것 같아요..

유택범님의 프로필 사진

React를 사용하긴 했지만 비슷한 경험이 있어서 공유드립니다. 저는 아래와 같은 함수를 만들어서 화면을 그리기 전에 호출하는 식으로 했습니다.

1export const setScreenSize = () => {
2    let vh = window.innerHeight * 0.01;
3    let vw = window.innerWidth * 0.01;
4    document.documentElement.style.setProperty('--vh', `${vh}px`);
5    document.documentElement.style.setProperty('--vw', `${vw}px`);
6}
써닝님의 프로필 사진

써닝

작성자

개발5월 26일

같은 코드로 어제 퇴근전에 해봤는데 왜 적용이안될까요ㅠㅠ 흑

유택범님의 프로필 사진

유택범

Software Developer5월 26일

함수는 호출되었는데 적용이 안된다는 말씀이신가요?

써닝님의 프로필 사진

써닝

작성자

개발5월 26일

넵 함수호출되서 높이 구해지는거 확인했고, css에 root 변수 설정 후 vh로 적용된 부분 전부 바꿨는데도 모바일에선 스크롤이 생기네요ㅜㅜ 웹에선은 어떻게해도 잘 나오는데 ㅠㅠ

유택범님의 프로필 사진

유택범

Software Developer5월 26일

root 변수 설정 후 vh로 적용된 부분 전부 바꿨다는게 어떤 말씀인지 잘 이해가 가질 않네요.. 제 CSS도 첨부드립니다! #root { height: calc(var(--vh, 1vh) * 100); }

이재찬님의 프로필 사진

저도 예전에 Mobile Web 개발을 했을 때, chrome, android 기반의 기기는 Addressbar가 상단에 존재하지만 Apple, Safari의 경우 하단에 Addressbar가 튀어나오는 경우가 있고 해서 디자인하기 매우 어려웠던 기억이 드네요. 이 내용에 관련해서 이해하기 쉽게 설명해주는 Youtube 영상이 있습니다. 다만, 직접적인 해결법이라기 보다는 개념적인 이해를 돕는 영상이라고 생각해주시면 감사하겠습니다. 아래 영상의 내용을 기반으로 어떤 식으로 해당 내용을 적용할 수 있을지는 질문자님이 사용 중이신 언어에서 구현하시기 나름일 것 같네요. 참고하시고 도움이 되면 좋겠습니다! https://www.youtube.com/watch?v=pOuE9sgK9jY&ab_channel=frontendfyi

써닝님의 프로필 사진

써닝

작성자

개발5월 26일

감사합니다, 한번 확인해보겠습니다 ㅠㅠ

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.