[260320] TIL

Today I Learned (2026-03-20)

웹뷰 대응

• 안드로이드 스튜디오 웹뷰에서 CSS가 깨지는 현상을 해결했다.
• Next.js 뷰포트 설정을 추가하니 정상 동작했다.

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
}

확대 이슈 점검

• 뷰포트 설정 후에도 기기별로 화면이 확대되어 보이는 케이스가 있었다.
• 같은 기종에서도 시스템 폰트/환경 차이로 렌더링 결과가 달랐다.
• whatismyviewport.com으로 뷰포트/DPR 값을 비교해 원인을 추적했다.

시도한 설정

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

네이티브 웹뷰 설정 메모

webView.settings.apply {
    textZoom = 100
    useWideViewPort = true
    loadWithOverviewMode = true
}