tag · 2 posts

#css

화면이 잘리고 손이 미끄러집니다 - 웹뷰는 브라우저가 아니다 ep.05
  • series
  • develop
  • frontend
  • webview
  • wkwebview
  • androidwebview
  • viewport
  • safearea
  • css

화면이 잘리고 손이 미끄러집니다 - 웹뷰는 브라우저가 아니다 ep.05

레이아웃 뷰포트와 시각 뷰포트를 나눠 보면 100vh 문제, 키보드에 가려지는 하단 버튼, 노치에 잘리는 헤더가 한 축으로 정렬됩니다. iOS와 안드로이드 크롬과 Android WebView가 서로 다른 시간표로 움직였다는 점, 그리고 CSS로 막을 수 있는 제스처와 없는 제스처의 경계를 버전 조건과 함께 정리합니다.

read →
앱이 내 CSS를 덮어씁니다 - 웹뷰는 브라우저가 아니다 ep.06
  • series
  • develop
  • frontend
  • webview
  • wkwebview
  • androidwebview
  • darkmode
  • accessibility
  • css

앱이 내 CSS를 덮어씁니다 - 웹뷰는 브라우저가 아니다 ep.06

Android 웹뷰의 prefers-color-scheme는 사용자의 OS 다크모드가 아니라 앱 테마의 isLightTheme로 결정됩니다. 시스템 글꼴 배율은 웹 콘텐츠에 곱해지고, 핀치 확대는 앱이 켜지 않으면 아예 동작하지 않습니다. 마지막 항목은 WCAG 1.4.4 위반이기도 합니다. 이 편은 CSS 바깥에서 들어오는 스타일의 출처를 하나씩 지목하고, 웹이 선언할 것과 앱에 요청할 것을 가릅니다.

read →