본문 바로가기

모바일

안드로이드 웹뷰 FontAwesome 이슈 처리 며칠 전 앱개발자의 피드백 모바일 마크업을 안드로이드 웹뷰에 적용하면서 FontAwesome 폰트가 제대로 표현되지 않는 문제가 있더군요. 관련 이슈를 찾아 해결책은 찾았지만 원인은.. 추측만 할 뿐입니다. 트러블슈팅 안드로이드 개발단 or 마크업에서 각각의 해결 방법을 제공하는데 여기서는 마크업 부분만 기록합니다. 관련자료 : https://blogs.msdn.microsoft.com/wsdevsol/2012/10/23/about-webview-and-fonts/ 간단히 요약하면 웹폰트 파일을 base64로 인코딩한 외계문자들을 CSS 내부에 직접 작성합니다. 1. ttf, woff 등의 폰트 파일을 base64 로 인코딩 (온라인 웹폰트 변환 서비스 : https://www.fontsquirrel.c.. 더보기
iOS checkbox 스위치 UI 마크업 하이브리드앱 웹뷰 마크업 진행 중 iOS UI 형태의 Checkbox on,off 스위치가 필요해 찾아 보니 Pure CSS 형태 또는 JS 스위치 동작이 목표 디바이스에서 만족스럽지 못해 직접 마크업 해봅니다. 미리보기 마크업 방향 - 모바일 환경 최적화를 위해 가능한 모든 효과는 CSS를 사용- JS는 addClass(), removeClass() 정도만 사용- click, touch 이벤트 (접근성 저하요인 밀기 동작은 제외)- 아이폰 4,5,6 과 안드로이드 4.x 버전 이상 디바이스 지원 시작padding, margin 에 영향을 받지 않도록 box-sizing 속성을 지정합니다.-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-.. 더보기