2020. 3. 26. 21:37ㆍTIL
서클 버튼의 아이콘을 가운데로 정렬을 하는데 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 |