개발자
안녕하세요 현재 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 Developer • 2023년 05월 26일
함수는 호출되었는데 적용이 안된다는 말씀이신가요?
써닝
작성자
개발 • 2023년 05월 26일
넵 함수호출되서 높이 구해지는거 확인했고, css에 root 변수 설정 후 vh로 적용된 부분 전부 바꿨는데도 모바일에선 스크롤이 생기네요ㅜㅜ 웹에선은 어떻게해도 잘 나오는데 ㅠㅠ
유택범
Software Developer • 2023년 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일
감사합니다, 한번 확인해보겠습니다 ㅠㅠ
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!