Tip
IOS Safari WebView 화면 확대 막기
Kir93
2023. 2. 9. 15:08
728x90
반응형
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를 막아주면 보다 확실하게 확대 문제를 해결할 수 있습니다.
반응형