[이슈노트] iOS 이슈 모음 #5 (가로모드 여백, 확대)

 

 

1. 사파리에서 가로모드일 때, 사이트 양쪽에 여백이 생기는 이슈

이거 뭐람..? 사파리는 왜 자꾸 혼자 놀지..??

 

해결 방법은 생각보다 간단하다.

 

 

<meta name='viewport' content='viewport-fit=cover'>

 

위와 같이 뷰포트에 viewport-fit=cover 를 추가해주면 된다.

 

 

 

 

 

참고 : https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Designing Websites for iPhone X

 

 

 

---

 

 

 

2. 사파리에서 확대되는 이슈

 

ios 에서는 더이상 뷰포트 user-scalable=no  를 추가해도 사용자 휴대폰 설정에 확대 축소 가능으로 되어있다면 제한할 수 없게 되었다.  

이 때 touch-action: pan-y 를 사용하면 확대 축소를 제한하고 세로로 스크롤은 유지할 수 있다.   

 

 

참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

touch-action - CSS: Cascading Style Sheets | MDN

https://wit.nts-corp.com/2021/07/16/6397

CSS touch-action 한눈에 알아보기 | WIT블로그