개발자

모바일 웹 페이지 height…

2023년 05월 25일조회 138

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

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 3

프레드윰님의 프로필 사진

뭔가 봐야 알것 같아요..

유택범님의 프로필 사진

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

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

써닝

작성자

개발2023년 05월 26일

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

유택범님의 프로필 사진

유택범

Software Developer2023년 05월 26일

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

써닝님의 프로필 사진

써닝

작성자

개발2023년 05월 26일

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

유택범님의 프로필 사진

유택범

Software Developer2023년 05월 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

써닝님의 프로필 사진

써닝

작성자

개발2023년 05월 26일

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

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

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

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

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