반응형

ios 3

iOS에서 input type="number" 의 숫자 키패드 적용하기

모바일 작업을 진해할 때 가장 대표적인 안드로이드와 IOS(아이폰)의 환경을 최대한 비슷하게 구현해야 합니다. 하지만 의외로 IOS의 표준 동작은 우리가 예상하는것과는 다르게 동작할 때가 왕왕 있습니다. 우리는 숫자값을 입력받기 위해서 사용하기 위해 필드를 사용합니다. 안드로이드에서는 우리가 원하는 정상적인 방법으로 숫자 키패드가 적용되는데 IOS의 경우 기본적으로 상단에 숫자행으로 수정되어 특수문자가 혼용된 키보드가 기본적으로 적용되도록 되어 있습니다. 이는 숫자값만 필요한 필드에서 굉장히 불편한 UI 구조일 뿐 아니라 안드로이드와 IOS의 키패드가 다르게 동작된다는 점에서 사용자의 UX적인 측면에서도 좋지 않습니다. 이전에는 이런 경우 스크립트를 이용하여 강제로 키패드 패턴을 변경하는 방법을 사용하였..

IT/HTML & CSS 2022.08.17

안드로이드(Android), IOS 디바이스 구분하기

안드로이드(Android)와 IOS는 태어난 환경이 서로 다르기 때문에 같은 코드와 CSS 속성이 브라우저 엔진에서 다르게 랜더링 되어 화면에 우리가 예측한 값과 다르게 도출되는 경우가 발생합니다. 이 경우 사용자의 유저가 접속한 디바이스가 무엇인지 구분하여 안드로이드 유저에게는 안드로이드 화면이 노출되고 아이폰 유저에게는 아이폰 화면이 노출된다면 우리가 원하는 최적의 결과를 얻을 수 있습니다. 이 방법을 적용하기 위해선 사용자가 접속한 OS가 무엇인지 확인을 해야 합니다. 아래 스크립트를 적용하면 사용자가 접속한 OS에 따라 안드로이드, IOS, 그 외 세가지로 구분하여 body 태그에 해당 Class를 붙여주는 코드입니다. 감사합니다. function deviceModel(){ let currentO..

IT/JavsScript 2021.12.23

아이폰(ios)에서 모멘텀(momentum) 스크롤 사용하기

안드로이드(Android)와 아이폰의 운영체제(IOS)의 차이점은 여러 가지가 있지만 그 중 대표적으로 UI 측면에서 구분되는 차이점이 화면 스크롤(Scrolling)입니다. 💡모멘텀 스크롤이란? 안드로이드는 모바일에서 화면을 스크롤(Android)링 하게 되는 상황을 예로 들어볼게요. 손가락으로 화면을 터치를 한 후 위나 아래로 손가락의 제스처를 주게 되면 사용자가 움직인 화면의 방향으로 일정 영역만큼 스크롤에 가속도가 생기면서 이동되었다가 서서히 가속도가 줄어들면서 스크롤링이 멈추는 스크롤링을 볼 수 있는데 이것을 모멘텀 스크롤이라합니다. 우리말로 바꾸면 관성 스크롤 또는 가속도 스크롤이라고 말할 수도 있을 거 같습니다. 💡 근데 모멘텀 스크롤을 왜 아이폰(IOS)에 적용해야 하나요? 안드로이드에는 ..

IT/HTML & CSS 2021.12.22
반응형
//