TIL

Cross Browsing

모바일 환경에서의 view-port 통일하기

어제 작업했던 사파리 뿐만 아니라 거의 대부분의 모바일 브라우저들은 100vh가 원하는 대로 작동하지 않는 이슈가 있음
100vh에 상태표시줄(주소표시줄 등)에 가려지는 부분들이 포함되어 있기 때문
각종 브라우저에 관계 없이 통일하려면 새로운 방식이 필요

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);

window.addEventListener("resize", () => {
  vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
});

window.innerHeight 속성을 이용하여 view height을 불러오도록 하여, --vh라는 css 변수를 생성

뷰의 크기 변화를 감지하고 --vh를 다시 설정하도록 이벤트 리스너 설정.

일부 브라우저의 경우 입력중일 때 키보드가 화면을 차지하는 경우 resize 이벤트 발생으로 인식!

기존

@media ${media.mobile} {
  height: 100vh;
}

변경

@media ${media.mobile} {
  height: calc(var(--vh, 1vh) * 100);
}

var()

var(cssProperty, defaultValue)
css 변수를 넣어 값을 불러올 수 있음
default를 지정해두면 변수가 지정이 되지 않은 경우 defaultValue값을 불러옴

그 외 고려해볼 만한 사항

• 각 웹 브라우저의 default 스타일을 초기화시켜주는 CSS 스타일 적용하기 (ex: margin: 0; padding: 0; border-radius: 0; -webkit-appearance: none; ...)

user agent

Navigator 객체를 통한 접속 기종 확인

Safari 브라우저 호환 작업을 하다가 추가 작업한 내용.

개발중인 프로젝트는 iOS 앱도 개발이 되고 있어 앱 소개 페이지가 따로 없는 현재는 아이폰/아이패드가(앱 호환 기종) 접속할 경우 앱스토어로 연결되게끔 구현하고자 함

접속한 기종은 JS에서 navigator.userAgent를 통해 확인 가능
navigator는 Navigator 객체로 웹 브라우저와 관련된 대부분의 정보를 담고 있음
navigator 객체의 userAgent 프로퍼티로 접속 기기와 브라우저를 구분할 수 있음

function isiPhoneOriPad() {
  const { userAgent } = navigator;
  if (userAgent.match("iPhone") || userAgent.match("iPad")) return true;
  return false;
}

Location

location.href vs location.replace()

• location.href
  • 새로운 페이지로 이동
  • 히스토리가 기록됨
  • 값 대입 형태로 사용
• location.replace
  • 기존 페이지를 변경 (덮어 씌우기)
  • 히스토리가 기록되지 않음
  • 메서드로 사용

Location

• Location 인터페이스는 객체와 연결된 장소(url)에 관련된 정보를 담고 있음
• window.location 또는 document.location으로 접근 가능
• host, hostname, href, orifin, pathname, port, protocol 등의 프로퍼티를 갖고 있음