-
IOS Safari WebView 화면 확대 막기Tip 2023. 2. 9. 15:08728x90반응형
IOS10 이하 버전에서는 간단하게 user-scalble를 꺼주는 것 만으로 확대를 막을 수 있었습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />하지만 이후 버전부터는 해당 내용으로는 막아지지 않습니다.
이제 적용할 수 있는 방법은 css에서 확대하는 동작 자체를 막아주는 겁니다.
touch-action: pan-y;가로 터치를 막아주어 화면 확대를 못하게 막아주는 방법입니다.
이제 사용자 임의로 확대 축소를 할 수 없기 때문에 모든 게 끝이라고 생각되겠지만 또 변수가 있습니다.
사용자가 설정한 최소 폰트 이하(default 16px)의 input, select를 선택 시 자동으로 확대되는 문제가 있습니다.
이 문제의 경우 input, select의 font-size를 무조건 16px 이상으로 설정하면 되지만 사용자가 임의로 최소 폰트 크기를 늘리거나 하는 경우에는 적용되지 않고, 여러 이유로 불가능한 경우가 생깁니다.
이때 사용할 수 있는 방법은 무척 간단합니다.
// _app.tsx // 설정한 모바일 최소 넓이 ex. 414px const MINWIDTH = 414; const App = () => { ... const [widthRatio, setWidthRatio] = useState(100); useEffect(() => { if (typeof window !== 'undefined') { setWidthRatio(screen.width / MINWIDTH); } }, [widthRatio]); ... return ( ... <Head> {widthRatio <= 1 && ( <meta name="viewport" content={`user-scalable=no, width=device-width, viewport-fit=auto, initial-scale=${widthRatio || 1}, minimum-scale=${widthRatio || 1}, maximum-scale=${widthRatio || 1}`} /> )} </Head> ... ); ...이렇게 처리하면 기종과 상관없이 비율이 조정되기 때문에 확대를 막을 수 있습니다.
여기에 css를 통해 pan-y를 막아주면 보다 확실하게 확대 문제를 해결할 수 있습니다.
반응형'Tip' 카테고리의 다른 글
Next.js에서 사용하기 좋은 모니터링 툴 3가지 (0) 2023.08.10 JavaScript에서 바로 사용하는 Tip 4가지 (0) 2023.08.01 개발자에게 유용한 툴 (0) 2022.12.07 React에서 조건부 렌더링을 사용하는 5가지 방법 (0) 2022.12.01 NodeJS 프로젝트 라이브러리 최신버전 자동으로 업데이트 하기 (0) 2022.11.12