웹사이트 모바일 화면 확대/축소 설정하기

728x90

목 차

• 1. Lighthouse 보고서
• 2. <meta name="viewport"> 태그
• 3. Viewport 태그의 주요 속성
  • 3-1. initial-scale
  • 3-2. maximum-scale & minimum-scale
  • 3-3. user-scalable
• 4. HTML 적용하기
• 5. 테스트

 

1. Lighthouse 보고서

• [user-scalable="no"]이(가) <meta name="viewport"> 요소에서 사용되거나 [maximum-scale] 속성이 5보다 작음
• 모바일에서 웹사이트를 접속하여 확대/축소를 해보면 동작하지 않고 있었습니다.
• Lighthouse 보고서 설치 방법

lighthouse 보고서 내용

 

2. <meta name="viewport"> 태그

• HTML 문서에서 페이지의 레이아웃을 다양한 기기에서 올바르게 표시하기 위해 사용되는 중요한 요소입니다. 특히 모바일 기기와 같이 화면 크기가 다양한 환경에서 페이지를 최적화하는 데 필수적인 역할을 합니다.

 

3. Viewport 태그의 주요 속성

3-1. initial-scale

• initial-scale=1.0: 기본 화면 크기로 페이지를 표시합니다.
• initial-scale=0.5: 페이지를 50% 크기로 축소하여 보여줍니다.
• initial-scale=2.0: 페이지를 200% 크기로 확대하여 보여줍니다.

 

 

3-2. maximum-scale & minimum-scale

• maximum-scale=3.0: 사용자가 페이지를 최대 300%까지 확대할 수 있습니다.
• minimum-scale=1.0: 사용자가 페이지를 최소 100%로 축소할 수 있습니다.

 

3-3. user-scalable

• user-scalable=no: 사용자가 페이지를 확대/축소하지 못하게 설정합니다.
• user-scalable=yes: 사용자가 페이지를 확대/축소할 수 있습니다. (기본값)

 

4. HTML 적용하기

• 기존 "viewport"가 선언되어 있는 <meta> 태그를 찾아서 하단 소스로 변경해 줍니다.
• 확대축소 기능 : ON
• 최대 500%까지 확대 가능

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

 

meta 태그 소스 변경하기

 

5. 테스트

• 모바일에서 크롬 브라우저를 열고, 웹사이트에 접속합니다.
• 확대 축소가 되는지 테스트해 봅니다.

모바일 확대 축소 테스트하기