iOS,아이폰 CSS 마크업시 고려해야할 사항

퍼블리싱 하다보면 안드로이드에서는 잘 작동하였으나 아이폰에서만 문제가 발생한적이 있었습니다. 아래의 문제들은 어쩌면 최신 iOS에서는 따로 적용을 안해도 잘 작동할지도 모릅니다.
하지만, 좋은 퍼블리싱을 만들기 위해서는 구형 아이폰에서도 잘 적용이 되어야겠지요.. 그래서 이전부터 퍼블리싱하면서 나왔던 문제와 사용한 코드를 작성하였습니다.

 

첫번째. 가로스크롤

테이블 같은 경우 가로 스크롤을 주는 경우가 많습니다.
overflow-x:scroll를 주면 따로 스크립트 없이 가로 스크롤이 잘 적용되긴 하지만 iPhone에서는 스크롤이 부드럽지 못하고 뚝뚝 끊기는 느낌으로 스크롤이 되는 현상이 발생하였습니다. overflow 속성 준곳에 -webkit-overflow-scrolling: touch 를 추가하면 정상적으로 작동합니다.
* 스크롤을 디자인하고, 스크롤에 효과를 준다면  iscroll 사용을 추천드립니다.

 .box {
  overflow: hidden;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.box .inbox {
  width: auto;
}

 

 

 

두번째. 터치 효과

버튼을 클릭하거나 마우스 오버 시 색상 변경과 같은 간단한 효과를 줄 수 있는건 잘 아시는 부분일겁니다.
모바일 기기에서도 버튼 터치 시 색상이 변경되길 원하는 클라이언트도 있었습니다. 안드로이드 기기에서는 :hover나 :active를 하면 버튼 클릭시 PC와 같이 버튼 색상이 바뀌게 할 수 있지만 아이폰에서는 해당 셀렉터로는 작동하지 않았습니다.
이 경우에는 -webkit-tap-highlight-color에 rgba로 색상을 주는것이 좋습니다. 최신 안드로이드 폰에서도 지원하지만 구형 안드로이드폰은 지원하지 않는 경우도 있는 것 같으므로 :active 셀렉터도 같이 추가하면 좋습니다.

.btn {
    background: #353535;
    -moz-tap-highlight-color:rgba(64, 64, 64, 0.3);
    -webkit-tap-highlight-color:rgba(64, 64, 64, 0.3);
}
.btn:active {
    background: #000;
}

 

 

 

세번째. Safe Area

Web이 아닌 Ionic과 같은 하이브리드 앱을 만들때 필요합니다. 노치로 인하여 이 설정을 안하면 버튼이 노치나 하단 제스처 영역(?)과 겹쳐서 원할하게 사용할 수 없습니다.
safe-area-inset-top이 노치, bottom이 하단영역입니다.
padding과 calc 속성을 잘 섞어서 사용하는게 좋을듯합니다

/ iOS 10
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
// iOS 11 이상
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

.btn {
    padding-bottom: calc(constant(safe-area-inset-bottom) + 10px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
}