iOS로 input의focus를 확대할 때viewport로 해결

안녕하세요.개산
나는 웹을 만들고 싶을 때 input 라벨과textarea 라벨로 입력 영역을 만든다.
구현 후 확인되면 iOS 입력 시 약간 확대됩니다.
그 대처법을 보여드리겠습니다.
※ 2010/12/04 현재 이야기.

font-size를 16px로 설정하면 확대가 안 돼요.

원래 iOS 규격으로 font-size 값을 16px 이상으로 설정하면 줌이 되지 않는다.
무슨 의도인지는 알 수 없지만 문자가 너무 작으면 입력 시 가시성을 높이기 위해 애플이 이를 고려한다는 것이다.
따라서 그것을 뚫으려는 것처럼 아래 링크를 소개하는 방법도 만들어졌다.
iOS에서 input 포커스 발생 시 화면 줌 방지
여기에 소개된 것은 설정font-size: 16px과 동시transform: scale();에 외관 축소만 고려한다는 것이다.
획기적인 방법은 맞지만 변경font-size하려면 변경transform해야 한다.
겉으로는 해결됐지만 유지보수 코드를 고려하면 상책이라고 할 수 없다.

meta 탭의viewport 재검토

기존대로 스마트폰 페이지가 초점화되지 않도록 메타 태그user-scalable=no를 설정했다.
하지만 iOS 측의 고려로 설정user-scalable=no돼도 무시된다.
그래서 지금은 포커스를 제어할 수 없어 포기되기 쉽지만 사실은 그렇지 않다.
실제로 다음 메타 라벨을 넣으면 포커스가 있어도 초점이 잡히지 않습니다.

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

포인트는maximum-scale=1.0이다.
이것을 설정하면 포커스가 확대되지 않습니다.
하지만 위기가 있으면 확대를 잘 할 수 있으니 안심하세요.
(원래 iOS 10 이후에 무시된 값입니다.)
※ maximum-scale 이쪽을 보세요.
https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta

최후

이번에 소개한 방법은 현재 iOS를 대상으로 처리한 지정으로, 향후 브라우저 지침에 따라 어떻게 될지 알 수 없다.
또한 iOS는 font-size의 작은 상황을 피하기 위해 확대 처리를 한 것으로 보이며, 이번에는 두뇌 어딘가에 상반된 실현을 놓아야 한다.
아마도 입력 모드를 다시 고려할 때font-size일 것이다. 그러나 나는 그곳이 디자이너와 긴밀하게 협력할 수 있다고 생각한다.