Developer | Cross Browsing

Kate Jung·2022년 8월 8일
0

Developer

목록 보기
6/6
post-thumbnail

📌 Cross browser testing이란?

만든 웹 사이트와 웹 앱이 허용 가능한 수의 웹 브라우저에서 작동하는지 확인하는 방법

📌 필요 이유

같은 CSS / Javascript를 작성해도 브라우저마다 다르게 연산하는 경우 有

📌 브라우저

  • 대응 순서

    타겟이 되는 (가장 점유율이 높은) 브라우저부터

  • Chrome과 Edge는 호환

📌 해결 방법

  • Can I Use 사이트 참고

  • CSS

    • height: 100vh

      • 아이폰의 사파리

        하단 바의 길이까지 계산 → 스크롤 생성됨.

      • 해결 방법

        height: 100% 로 변경

      • li 태그에 height: 100% 값을 주었을 때, 사파리에서 문제 발생

        해결방법: li의 height 속성을 삭제

    • Date 객체

      • 이유 크롬과 사파리가 Date 객체를 처리하는 과정이 다름
      • 해결 방법 한 자리 날짜인 경우 앞에 0처리 → 사파리에서 정상 작동
      • 예시
        new Date('2021-1-1');
        //Chrome: Fri Jan 01 2021 09:00:00 GMT+0900 (대한민국 표준시)
        //Safari: Invalid Date
        
        new Date('2021-01-01');
        //Chrome: Fri Jan 01 2021 09:00:00 GMT+0900 (대한민국 표준시)
        //Safari: Fri Jan 01 2021 09:00:00 GMT+0900 (KST)

참고

profile
복습 목적 블로그 입니다.

0개의 댓글