애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • IOS Safari WebView 화면 확대 막기
    Tip 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를 막아주면 보다 확실하게 확대 문제를 해결할 수 있습니다.

    반응형

    댓글

Designed by Tistory.