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

 

 

 

 모바일 Safari 브라우저에서 크로스브라우징을 위해 고려해야 할 몇 가지 이슈와 대응 

 

 

 

1. 뷰포트 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Safari 브라우저에서는 뷰포트가 제대로 설정되어 있지 않으면 레이아웃이 깨지는 경우가 있기 때문에 메타 태그를 이용하여 뷰포트를 설정해 주어야 한다.

 

 

 

 

2. Retina 디스플레이 대응

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Retina 디스플레이에 대응하는 스타일 */
}

Safari 브라우저는 Retina 디스플레이를 지원하기 때문에, 고해상도 이미지를 사용할 때 레이아웃이 깨질 수 있다. 따라서, CSS를 이용하여 Retina 디스플레이에 대응하는 것이 좋다.

 

 

 

 

3. font 이슈 대응

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap;
}

Safari 브라우저에서는 다른 브라우저와 달리 폰트를 로드할 때 캐싱되는 시간이 다르기 때문에, 폰트가 깨지는 문제가 발생할 수 있다. 이 경우, font-display 속성을 사용하여 폰트 로딩을 최적화하는 것이 좋다.

 

 

 

 

4. flexbox 이슈 대응

/* Flexbox 대신 사용할 스타일 */
.no-flexbox {
  display: table-cell;
  vertical-align: middle;
}

Safari 브라우저에서는 Flexbox의 몇 가지 기능을 지원하지 않는 경우가 있기 때문에 대체 스타일을 제공하는 것이 좋다.

 

 

 

 

4. position: fixed 이슈 대응

.scrollable {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Safari 브라우저에서는 다른 브라우저와 달리 position: fixed 속성을 가진 요소를 스크롤할 때 성능 문제가 발생할 수 있다.

touch 값은 손가락으로 스크롤할 때 최적화된 성능을 제공한다. 이 속성을 사용하면, position: fixed 속성을 가진 요소를 스크롤할 때 성능 문제를 완화할 수 있다.