크로스브라우징(Cross Browsing)이란?
웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 동일하게 나올 수 있도록 하는 작업을 말한다.
브라우저마다 렌더링 엔진이 다르기 때문에 내가 제작한 웹 페이지가 모든 브라우저에서 동일하게 나오지 않을 가능성이 높고 이로 인해 크로스 브라우징은 꼭 필요한 과정이다.
테스트 전 적용해야 할 것
- 웹 표준을 준수한 코드
- Reset CSS
- 반응형 웹 디자인
크로스브라우징(Cross Browsing) 테스트
기본적으로 코드를 작성할때 웹표준 권고안대로 작성하는 것이 좋다.
또한 테스트를 할 때는 다양한 브라우저에서 테스트를 해야 한다.
- 링크, 메뉴, 유효성 검사 등 기본 기능이 잘 동작하는지 확인
- 폰트, 이미지, 레이아웃 등 디자인 시안대로 잘 나오는지 확인
- 애플리케이션이 사용자에게 잘 반응하는지 확인
- 다양한 크기의 화면에서 깨지지 않고 잘 동작하는지 확인
각 브라우저마다 호환성 체크는 MDN, Can i use에서 확인할 수 있다.
모바일 환경에서의 호환성 이슈
요즘은 많은 사람들이 모바일로 서비스에 접근하는 경우가 많으므로 필수로 체크하는 것이 좋다.
- 터치 이벤트 적용
- 반응형 디자인 적용
- 이미지 최적화
- metatag 적용
- width=device-width : 장치의 화면 너비에 따라 페이지를 설정한다.
- initial-scale=1.0 : 페이지가 로드될 때 초기 줌 레벨을 설정한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">