스마트폰으로 모바일 웹에 접근시,
input 입력창을 터치(클릭)하여 포커스가 먹으면, 화면이 확대될 때가 있다.
당췌 어떻게 해결해야할지 난감할 수 있지만, 해결책은 아주 쉽고 간단하다.
#모바일 화면 자동확대 방지 방법
<head></head> 사이에 viewport 메타태그를 아래와 같이 설정해주면 된다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >필요에 따라 maximum-scale=1 속성을 추가하여 확대 배율을 설정할 수도 있다.
도움이 되셨길 바랍니다.
(참고) viewport 속성
width=device-width : 화면 너비를 기계 너비로 맞춤
initial-scale=1.0 : 초기 화면 크기 배율 설정
minimum-scale=1 : 최소 화면 크기 설정
maximum-scale=1 : 최대 화면 크기 설정
user-scalable=no : 사용자가 화면 확대/축소 가능 여부 설정
target-densitydpi=device-dpi : 해당도를 기기에 맞춤 설정
'개발(Development) > HTML, CSS' 카테고리의 다른 글
| [HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용) (0) | 2021.01.22 |
|---|---|
| [CSS] 아이폰(iOS) input, button 기본 테두리, 색(그라데이션) 스타일 제거 방법 (0) | 2021.01.21 |
| [HTML] input:radio 여러개(다중) 선택될 때, 하나만(단일) 선택 방법 (0) | 2021.01.19 |
| [HTML] a 태그 하이퍼링크 비활성화(disable) 방법 (0) | 2021.01.04 |
| [CSS] HTML: 이미지 태그 img 여백 뜨는 문제 해결방법 (0) | 2021.01.03 |
댓글