List

iOS와 안드로이드 차이 대응

#웹가이드

Web GuideiOS안드로이드호환성
iOS와 안드로이드 차이 대응
안드로이드에서는 되는데 아이폰에서만 깨집니다.
둘 다 확인하지 않으면 절반의 이용자를 놓칩니다.
iOS와 안드로이드 차이 대응 관련 사진
01왜 다른가
기반 엔진이 다릅니다.
01
엔진 차이
화면을 그리는 방식이 다릅니다.
02
업데이트 주기
기능 지원 시점이 다릅니다.
03
정책 차이
허용되는 동작이 다릅니다.
04
기본 글꼴
시스템 폰트가 다릅니다.
05
기본 스타일
버튼과 입력칸 모양이 다릅니다.
06
제스처
뒤로 가기 방식 등이 다릅니다.
02자주 생기는 차이
실무에서 반복되는 항목입니다.
화면 높이
주소창 때문에 높이가 변합니다.
입력 시 확대
글자가 작으면 화면이 확대됩니다.
고정 요소
스크롤 중 위치가 흔들립니다.
영상 자동 재생
정책이 다릅니다.
날짜 선택
기본 화면이 다릅니다.
노치 영역
안전 영역을 고려해야 합니다.
03대응 원칙
차이를 없애려 하기보다 수용합니다.
기본 동작 존중
각 플랫폼 관습을 따릅니다.
안전 영역 여백
노치와 하단 바 고려.
입력 글자 크기
확대되지 않을 크기로.
높이 단위
주소창 변화에 대응.
기본 스타일 초기화
차이를 줄입니다.
재생 정책 준수
무음 설정 등.
04테스트 방법
실제 기기 확인이 필요합니다.
부족한 방법
PC 브라우저 모바일 모드만 · 실제 엔진이 다름 · 차이가 안 드러남
충분한 방법
양쪽 실제 기기 · 최신과 구버전 · 인앱 브라우저 · 가로 모드까지
CHECK POINT
□  아이폰과 안드로이드 실기기로 확인했는가
□  입력 시 화면이 확대되지 않는가
□  노치와 하단 영역을 고려했는가
□  주소창 변화에 화면이 대응하는가
□  고정 요소가 흔들리지 않는가
□  영상 재생 정책을 반영했는가
□  날짜 선택 등 기본 요소를 확인했는가
□  구버전에서도 기본 동작하는가
PC 브라우저의 모바일 모드로는 두 플랫폼 차이가 드러나지 않습니다.
차이를 없애려 하기보다 각 플랫폼의 관습을 존중하는 편이 낫습니다.
#iOS#안드로이드#호환성#실기기 테스트#안전 영역#입력 확대#플랫폼#반응형#웹비스타#홈페이지 제작
목록보기