[CSS]하이브리드앱 크로스브라우징 문제(ios)

가장 최신 ios 버전 = 15

1. input, textarea 폰트 사이즈 16이하 포커스시 자동으로  zoom-in 발생

iOS에서는 input 태그나 textarea 태그의 폰트 사이즈가 16px보다 작으면 focus 시 자동으로 zoom-in이 발생합니다.

meta tag에 ‘maximum-scale=1.0’ 옵션을 넣어 문서의 최대 배율 범위를 설정하면 zoom-in은 발생하지 않습니다.

그러나 구글 lighthouse 웹 접근성 지표에 감점이 적용될 수 있습니다.

 

 

2. a태그 클릭시 하이라이트 효과 생김

a태그 클릭 시 하이라이팅 효과가 발생합니다. webkit 엔진 기반의 브라우저에서 발생하는데, 전역 스타일 시트에 속성을 투명으로 적용하면 하이라이팅 효과를 제거할 수 있습니다.

-webkit-tap-highlight-color: transparent;

 

 

참고

https://boostbrothers.github.io/hospital-detail-webview/

https://channel.io/ko/blog/cross_browsing_ios15

https://channel.io/ko/blog/cross_browsing_ios15

블로그 - iOS15 대응기(feat. 크로스 브라우징)

 

 

3. normalize.css 쓰는것도 방법

브라우저마다 제공하는 user agent style이라는 게 존재하는데, 말 그대로 브라우저별 스타일 기본값

 reset.css 도 있는데 요즘은 reset.css 보다는 normalize.css를 많이 사용하는 추세이며,

또 다른 전략 기법인 reset.css 와 normalize.css를 섞어서 사용하는 기법 역시 사용하는 추세이다.

 

4. 모바일을 네이버나 다음, 크롬, 사파리로도 사용해서 테스트에 꼭 포함시켜야 한다.

 

5. 화면고정을 해주는 meta 태그

<meta name="x-mz-orientation" content="portrait">

 

6. ios 크롬, 사파리에서 height:100vh 안됨

iOS 기기 브라우저에서 100vh 를 브라우저의 도구바 영역까지 잡고 있다고 한다. 그래서 하단에 버튼과 같은 무언가 배치하면 가려서 안보이는 현상이 나타난다.

// js 코드
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty(`--vh`, `${vh}`);


// css 코드
.main-section {
	height: calc(var(--vh, 1vh) * 100);
}

출처: https://white-salt.tistory.com/m/34