[TIL] 03.27 vendor Prefixs, google analiytics, mobile safari height

2020. 3. 26. 21:37TIL

서클 버튼의 아이콘을 가운데로 정렬을 하는데 IE에서만 정렬이 되지않았다. 

버튼에 position: relative를 해주지 않아서 생긴 에러 였는데 처음엔 IE 브라우저의 문제로 생각하고 해결법을 검색 해보았다. 

해결법으로는 vendor Prefix를 적용 해주는 것이였다. 크로스 브라우징 이슈를 해결하기 위한 접두사로 

  • 크롬&사파리 : -webkit-
  • 파이어폭스 : -moz-
  • 오페라 : -o-
  • 인터넷 익스플로러 : -ms-

각 브라우저 마다 이렇게 붙여 주면 된다. 

 

google analiytics 를 적용을 해주는데 ga는 component가 didmount 될 때 해당 페이지가 기록이 되므로 컴포넌트의 최상위인 app에만 설정을 해두면 된다고 한다. 하지만 한 페이지의 어떤 설문 조사같은 단계를 밟아가는 페이지를 기록하고 싶다면 그 컴포넌트마다 ga를 넣어줘야 한다. 

//step 1 route: survey?step1

ga.logPageView(survey?step1);

//step 2 route: survey?step2

ga.logPageView(survey?step2);

 

mobile safari 의 height을 100%로 설정을 하였는데 적용이 안되는 에러가 생겼다. 

다른 브라우저도 다 적용이 되고 웹 사파리도 제대로 적용이 되는데 모바일만 되지 않았다. 

 

원인을 찾아보았을 때 모바일 사파리가 높이 계산을 하지 못하여 제대로 적용이 되지 않는것 같았다. 

 

해결법을 찾아 보았는데 

1. height의 최대 높이를 준다. height을 1000px 씩 주어서 강제로 높이를 맞추는 방법인데 이러면 스크롤이 엄청 늘어난다. 

2. media 쿼리로 너비를 설정해준 다음 해당 너비에서의 높이 값을 구해서 넣어주는 방법이다. 

media only screen and (max-width: 320px) {
	height: 650px;
}

3. 제이쿼리를 사용하여 스크린의 높이를 구하고 해당 높이를 height 으로 주는 방법

 

1,2 번 방법은 적용은 되지만 좋은 해결방법은 아닌것 같았다. 3번은 아직 시도해 보지 않았는데 제이쿼리를 사용하지 않는 다른 방법을 찾아보려고 한다. 

'TIL' 카테고리의 다른 글

[TIL] 03.30  (0) 2020.03.30
[TIL] 03.27  (0) 2020.03.27
[TIL] 03.25 css 우선 순위, sass classNames 선택자  (0) 2020.03.25
[TIL] 03.24 css transform  (0) 2020.03.24
[TIL] 03.23  (0) 2020.03.23