mobile (3) 썸네일형 리스트형 [IOS] safari에서 확대 축소 막기 기존 모바일에서 확대 축소를 막기 위해선 코드만 추가해주기만 하면 정상적으로 작동이 됬습니다. IOS 10 이후 새 기능으로 To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport. 가 추가됨과 동시에 user-scalable=no 만으로는 아이폰 사파리에서 확대 축소가 불가능해졌습니다. 오늘은 css의 touch-action 으로 모바일 확대 축소 막는 방법을 알아보겠습니다. touch-action: pan-y; 를 사용하게 되면 세로 터치는 가능하게 되고 전체 확대는 불가능하게 됩니다. 감사합니다. 안드로이드, 아이폰 숫자 키패드만 뜨게 하기 input 에서 인증번호를 입력 받을 때 사용 안드로이드 이렇게만 하게 되면 안드로이드에서는 숫자 키패드만 뜨게 되는데 아이폰에서는 작동이 안된다. 아이폰 적용을 위해 pattern="\n"를 추가해주게 되면 정상적으로 동작한다. 모바일 viewport 설정 안녕하세요. 오늘은 모바일 viewport 설정을 알아보겠습니다. viewport 설정 viewport 설정이 필요한 이유는 모바일 브라우저에서 웹 페이지를 브라우징 할 때는 데스크탑 환경처럼 웹페이지 전체를 자연스럽게 브라우징 할 수 있도록 풀브라우징을 지원합니다. 그렇기 때문에 웹페이지를 모바일에서 보면 전체적인 페이지가 축소되어 보여 가독성이 떨어지게 됩니다. 웹페이지를 모바일로 보게 되면 기본 viewport는 980px이어서 이로인해 작게 보입니다. 그래서 viewport를 설정하게 되면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율에 맞게 볼 수 있습니다. 사용방법 head 태그 사이에 다음과 같이 코드를 입력합니다. -width=device-width: 페이지의 너비를 기기의 스크린 너.. 이전 1 다음