모바일웹

모바일에서 스크롤 없이 높이를 딱 맞게 사용하고 싶어서 height: 100vh로 설정했다 개발자도구(모바일)로 확인 했을 때는 잘 적용이 된 것처럼 보였다 하지만!! 실제 모바일 기기로 크롬, 사파리에서 확인 하니 높이가 딱 맞게 적용이 안되고 있었다 🥲 (화면의 오른쪽에 스크롤이 생겨버렸다..ㅎㅎ) 이 이유는 100vh가 상단 주소창 영역과 하단의 네비게이션 영역의 사이즈까지 반영을 못하기 때문이다 해결 방법 javascript에서 window.innerHeight를 이용해 1vh를 계산해 주면 된다 function setMobileVh() { let mobileVh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--..
모바일 웹을 이용하다 보면 "앱에서 보실래요?"라는 팝업과 함께 앱 설치를 유도한다 이때 모바일 웹에서 앱으로 이동하기 위해서는 두 가지 경우로 나뉘는데 앱이 있는 경우 앱에서 해당 링크 페이지를 보여준다 앱이 없는 경우 구글 스토어나 앱 스토어로 이동해 앱 설치를 유도한다 앱의 설치 여부를 알 수 있는 방법은 없다! 그래서 살짝의 꼼수를 써서 구현했다 function deeplinker(url) { let isChange = false; const userAgent = navigator.userAgent; if (userAgent.match(/Android/i)) { // 안드로이드일 때 setTimeout(()=>{ if (!isChange) { gotoappstore(); } } ,100); } e..
솔B
'모바일웹' 태그의 글 목록