[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
}

Categories:

Updated:

Leave a comment