사파리 인풋 포커스시 자동 줌인 방지( Next.js )

문제

크롬에서는 유저가 인풋 포커스할때 내가 예상하는 시나리오대로 잘 흘러가던 화면이 사파리에서 테스트를 해보니 1.2배 정도 갑자기 줌인을 당겨서 원하지않는 화면의 전환이 생겼다... 또 사파리....

왜?

Safari에서는 input의 폰트가 특정 폰트 사이즈 (16px)보다 작으면 이런 현상이 나타난다고 한다.
web accessabiltiy의 일환으로 자동으로 적용시킨 기능이 아닐까..?

옵션

1. 줌인 기능을 완전히 disabled 시키기
   html head에 meta tag에 줌인관련 속성을 지정하면 줌인을 비활성화 시킬수있다.

2. 줌인을 시키기싫다면 폰트를 사이즈를 수정하기

해결방안

현재 프로젝트에서는 1번 옵션이 더 나은 방식이라고 판단이 들어서 아래의 예시코드를 시도 해보았다.

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

문제는 현재 작업하고 있는 프로젝트는 next.js app router를 기반으로 라우팅처리를하고있고 layout.ts 를 통하여 공통적인 레이아웃 및 프로바이더 역활을 하고있어서 그냥 react내 html에서 추가해주는 방식으로는 meta 데이터가 통하지 않았다.. 아무리 추가를해도 그냥 디폴트 값으로 override가 되어서 좀 더 찾아보니 layout 파일 내의 static metadata ojbect에서 추가를 해야 정상적으로 작동한다.

예시코드:

in layout.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Project',
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
};

참고 링크 https://stackoverflow.com/questions/76740487/override-meta-tags-in-nextjs-13-4