호랑이 개발일기
스마트폰(모바일) input 입력창 포커스 시, 화면 확대 방지 방법 본문
728x90
스마트폰으로 모바일 웹에 접근시,
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 : 해당도를 기기에 맞춤 설정
728x90
'Frontend' 카테고리의 다른 글
| Vue3 - The template root requires exactly one element 해결(vetur) (0) | 2023.07.30 |
|---|---|
| 현업 개발자 도와드립니다. 무료 ! (0) | 2023.05.05 |
| [ Vue.js ] Vue 개발환경 터미널에서 빠르게 구축하기 (0) | 2023.03.16 |
| [Vue웹베포] Vue로서 만든 프로젝트 웹베포해보기 (0) | 2023.01.29 |
| [Vue 설치 및 시작하기] Vue 설치 어떻게해요? (0) | 2023.01.15 |
'Frontend' Related Articles
more
Comments