투케이2K

107. (Web/FrontEnd) HTML meta tag 메타 태그 viewport 뷰포트 사용해 모바일 웹 zoom 줌 확대 , 축소 , 사이즈 고정 본문

FrontEnd

107. (Web/FrontEnd) HTML meta tag 메타 태그 viewport 뷰포트 사용해 모바일 웹 zoom 줌 확대 , 축소 , 사이즈 고정

투케이2K 2024. 6. 26. 19:51

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

​

 

[소스 코드]

 

------------------------------------------------------------------------------------
[사전) 속성 값 설명]
------------------------------------------------------------------------------------

1. width=device-width : 사용자가 실행한 디바이스의 넓이 값에 맞춘다

2. initial-scale : 페이지 첫 로딩 시 줌 레벨 설정 값

3. minimum-scale : 페이지 최소 줌 레벨 설정 값

4. maximum-scale : 페이지 최대 줌 레벨 설정 값 

5. user-scalable : 사용자가 확대 및 축소를 수행할 수 있는 가능 여부 값

------------------------------------------------------------------------------------


------------------------------------------------------------------------------------
[viewport 뷰포트 zoom 줌 확대 및 축소 설정]
------------------------------------------------------------------------------------

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes">

------------------------------------------------------------------------------------


------------------------------------------------------------------------------------
[viewport 뷰포트 zoom 줌 사이즈 고정 설정]
------------------------------------------------------------------------------------

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

------------------------------------------------------------------------------------

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

108. (Web/FrontEnd) HTML meta tag 메타 태그 mobile-web-app-capable 사용해 웹앱 URL 주소창 제거 및 전체 화면 설정  (0) 2024.09.19
106. (html/css/javascript/jquery) 이미지 태그에 이미지 파일 (jpg, png) 로드 시 확장명 뒤에 QueryString 쿼리 스트링 추가 방법  (0) 2023.10.25
105. (html/css/javascript/jquery) mask-image 사용해 img 이미지 태그에 마스킹 표시 설정 수행  (0) 2023.08.13
104. (html/css/javascript/jquery) img 이미지 태그 onerror 사용해 에러 발생 대체 이미지 표시 설정  (0) 2023.08.13
103. (html/css/javascript/jquery) object-fit 사용해 css img 이미지 태그 사이즈 조절 수행  (0) 2023.08.13
'FrontEnd' Related Articles more
Comments