capacitor ios ionic android webview pinch zoom 확대방지 ios zoom

agnusdei·2024년 7월 3일

<!-- notch design && zoom block -->
     <meta
     name="viewport"
     content="viewport-fit=cover, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
   <!-- ios -> 앱처럼 보이게 -->
          <meta name="apple-mobile-web-app-capable" content="yes" />
       <meta name="apple-mobile-web-app-status-bar-style" content="black" />
       <meta name="apple-mobile-web-app-title" content="MyApp" />
       <link rel="apple-touch-icon" href="/icon.png" />
ion-content {
  overflow: hidden; /* 키보드 등장 시 스크롤 방지 */
  overscroll-behavior: contain; /* 화면 튕김 방지 */
}
  • 스크롤 방지
import { StatusBar } from '@capacitor/status-bar';

// 상태바 오버레이 제거
StatusBar.setOverlaysWebView({ overlay: false });

 // 상태바 배경색 설정
StatusBar.setBackgroundColor({ color: '#ffffff' });
profile
DevSecOps, Pentest, Cloud(OpenStack), Develop, Data Engineering, AI-Agent

0개의 댓글