Input Field에 Focus 될 때 fontSize가 16px 미만일 경우 글자가 너무 작다고 판단하여 ios에서 자동으로 확대하게 됩니다.
하지만 이런 경우 사용자가 바라보게 되는 디자인 객관성이 떨어지게 되고, UX 관점에서 사용자 경험이 떨어지게 됩니다.
그래서 이 문제를 해결한 방법에 대해서 적어보았습니다.
1. fontSize 16px 설정
<input className="mobile:text-[16px]" />모바일 환경에서 fontSize를 16px로 고정하거나 더 크게 하면 input에 focus가 생기면 viewport가 확대되는 것을 방지할 수 있습니다.
접근성을 해치지 않으면서 가장 안전한 방법입니다.
하지만 폰트의 크기를 고려하지 않고 디자인 된 경우라면 오히려 디자인에 어색함을 줄 수 있으므로 다음의 방법으로 해결할 수 있습니다.
2. metadata 태그 이용
[ReactJS/HTML5] index.html
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
</head>[NextJS] layout.tsx
export const viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
};
width=device-width- width를 사용자의 device-width 로 맞춤
initial-scale=1- 페이지 첫 로딩에서 scale을 1(100%)로 설정
maximum-scale=1- 페이지의 최대 확대 크기를 1(100%)로 설정
user-scalable=no- 사용자의 핀치 줌을 허용하지 않음
풀어서 해석해보면 width를 device의 넓이로 맞춘 후, 첫 로드에서 원본 크기대로 로드한 후 페이지의 최대 확대 가능 크기를 100%로 설정 후 사용자의 핀치 줌을 비활성화 하겠다로 됩니다.
그치만 이렇게 확대가 안되게 했어도, ios10 부터 user-scalable, maximum-scale의 메타데이터는 접근성의 이유로 브라우저에서 무시하게 되어 있습니다.
그런데 해당 메타데이터가 무시됐음에도 불구하고 input에 focus가 생겼을때 확대되지 않고, 사용자가 핀치줌이 가능한 이유는 사파리 브라우저에서 내부적으로 확대를 하고 있지만, 렌더링 과정에서 확대하지 않기 때문입니다.
window.visualViewport?.addEventListener("resize", () => {
alert(window.visualViewport?.scale);
});위 코드로 Resize Event가 발생하는 코드를 넣었음에도 input에 focus가 생길 경우 확대는 되지 않는데 alert가 발생하는걸 확인할 수 있습니다.
많은 도움이 되었습니다. 글 잘 읽히네요 ㅎㅎ