1. 새로운 단위 사용하기
[React] 모바일 웹 100vh 스크롤 버그 + tailwind 적용법
문제 상황 페이지에 height : 100vh 속성을 주었는데, 모바일에서 테스트해보니 스크롤이 생깁니다. 1vh는 스크린 높이의 1%이므로 100vh면 스크롤없이 스크린을 가득 채워야하는데, 모바일에서만 이
s0ojin.tistory.com
여기서 해결방법 2 참고.
+ 해결방법 2의 단위에 대한 내용 :
https://web.dev/blog/state-of-css-2022?hl=ko#viewport_units
2022년 CSS 현황 | Blog | web.dev
Google IO 2022에서 확인할 수 있는 현재와 미래의 웹 스타일 지정 기능 및 몇 가지 추가 사항
web.dev
2. javascript로 설정하기
https://triplexlab.tistory.com/116
모바일 웹 앱에서 100vh이 가진 세로 사이즈 문제
📱 모바일 웹 앱에서 100vh이 가진 문제(윈도우창 리사이즈) 안녕하세요 TriplexLab 입니다. 오늘은 모바일 웹 앱에서 100vh이 가진 문제에 대해서 살펴보도록 하겠습니다. 이 글은 아래 글들을 참고
triplexlab.tistory.com
728x90
'퍼블리싱 > HTML | CSS | Javascript' 카테고리의 다른 글
| webp와 png 동시에 사용하기 (1) | 2024.04.19 |
|---|---|
| 반응형 이미지 비율 유지하기 (0) | 2024.04.05 |
| 모바일에서 클릭시 연한 파란색 bg 없애기 (0) | 2024.04.04 |
| swiper 옵션 정리 잘된 글 (0) | 2024.04.04 |
| 스크롤바 위치 상하 반전시키기 change scroll bar position (0) | 2024.01.11 |