Safari 브라우저에서 크로스 브라우징 하기

크로스 브라우징 Cross Browsing이란?

서로 다른 웹 브라우저에서 웹 페이지가 일관된 방식으로 렌더링하는 기술.
다양한 컴퓨터 환경 또는 브라우저에서 동일한 정보를 표시하기 위해 필요하다.

호환성 이슈 발생 원인

각각 웹 브라우저는 HTML, CSS, JavaScript 등 해석하는 방식과 지원 기술 정도가 다를 수 있다. 이로 인해 웹 페이지가 서로 다른 웹 브라우저에서 제대로 동작하지 않을 수 있다.

모바일 서비스 중 발생 가능한 호환성 이슈

1. 디바이스 화면 크기
2. 운영체제와 브라우저 호환성
3. 모바일 기기의 하드웨어와 기능
4. 네트워크 연결 상태

모바일 서비스 호환성 이슈 해결 방법

1. 반응형 웹 디자인: 웹페이지가 디바이스의 화면 크기에 따라 자동으로 적합한 크기로 조정하는 것. CSS에서 미디어 쿼리를 이용해 화면 크기 별로 조정할 수 있다.

2. 크로스 브라우징 테스트: https://www.lambdatest.com/ 등 크로스 브라우징 테스트툴에서 테스트를 수행해 호환성 이슈를 예방할 수 있다.

3. 이미지 최적화, 폰트 최적화, JS 최적화 등으로 모바일 브라우저에서 발생 가능한 호환성 이슈를 예방할 수 있다.

Metatag의 다른 설정 방법

Metatag는 HTML head 부분에 위치하며, ,

HTTP 헤더 / robots.txt 파일과 Open Graph / Twitter Cards / Schema.org 등 다양한 웹 사이트에서 운영하는 메타 데이터 프로토콜을 활용해 Metatag를 설정할 수 있다.

출처: MDN, soo30.log 등