모바일 100vh
-
04. 모바일 관련 문제들 해결하기 (우클릭 방지, input range 등)Projects/뮤직 플레이 리스트 2021. 6. 14. 14:06
body { ... -webkit-touch-callout: none; } 모바일에서 안되는 것 투성이...? 이 전 포스트에서 CI / CD 툴을 연동한 이유는 사실 이번 포스팅의 문제를 해결하기 위해 구축한 사전 작업이다. 분명 PC 브라우저에서 화면의 레이아웃이나 동작들이 모두 이상없이 잘 작동했는데, 모바일로 들어가보니 되는 기능이 하나 없었다. 그 중 대표적인 몇 가지를 적어 보자면 아래와 같다. 1. 화면 레이아웃 깨짐 (100vh 문제 포함) 2. 이미지 버튼을 꾹 누르면 브라우저의 이미지 저장 창이 나타나서 음악을 5초뒤, 5초 전으로 건너 뛸 수 없음 3. 에서 드래그 작동 안함 4. javascript로 volume 컨트롤이 안됨 5. drag & drop 기능 작동 안함 설렌다... ..
-
02. 모바일 100vh 스크롤 문제 해결하기Projects/우주 심리 테스트 2021. 6. 9. 20:10
문제발견 모바일 화면에서 전체화면을 만들기 위해 100vw, 100vh로 설정을 했다. 브라우저에서 확인 하면 이상이 없지만, 실제 모바일 브라우저에서는 스크롤이 생기는 현상이 발견되었다...! vw와 vh 우리는 종종 스크린 사이즈의 너비를 혹은 높이 이용해 css 스타일링을 하곤 한다. 이 때 사용하는 단위가 바로 vw, vh 인데 1vw는 스크린 너비의 1%, 1vh는 스크린 높이의 1%를 말한다. 다시 말해, 100vw는 스크린 가로 사이즈, 100vh는 스크린 세로 사이즈를 의미한다. 이번 mbti 페이지에는 이 vw, vh라는 단위를 자주 사용했다. 브라우저의 관리자 모드에서 모바일 환경에서의 해상도를 미리 확인 해 볼수 있는데, 처음에 우리는 이 모드로 계속해서 확인 하면서 화면에 딱 맞는 ..