[Web] 모바일 기기(mobile device) 화면 잘림 현상 원인 및 해결 방법 (+ viewport)

Development knowledge/Web

[Web] 모바일 기기(mobile device) 화면 잘림 현상 원인 및 해결 방법 (+ viewport)

yuri lee 2023. 4. 19. 22:18

Intro

안녕하세요. 이번시간에는 모바일 기기 (mobile device) 화면 잘림 현상에 대해 알아보겠습니다.

제 경우 react next project를 만들었습니다. pc local 개발자도구 테스트 시 화면 잘림 현상 없이 잘 나왔지만, 실제 핸드폰에는 border line이 살짝 잘린 현상이 나타나더라고요. 해당 문제를 해결하기 위해 구글링을 해봤습니다. 🤘

Why?

모바일 기기에서 화면 잘림 현상이 나타나는 원인은 여러가지 있을 수 있겠만, 대게는 모바일 기기 브라우저의 뷰포트와 관련된 문제라고 합니다. 모바일 브라우저는 페이지 렌더링 시 뷰퍼트의 크키에 맞게 자동 조정됩니다. 하지만 브라우저가 뷰포트의 크기를 올바르게 계산하지 못할 경우, 페이지가 제대로 나오지 않는 경우가 발생합니다. 특히 제 경우에는 모바일 브라우저 화면을 축소하여 페이지 전체를 보여주려고 했기 때문에 border line 이 잘려보였던 것이였습니다.

ViewPort?

뷰포트란 웹 페이지가 렌더링되는 영역으로, 모바일 기기와 데스크탑 등의 디바이스 화면 크기가 다르기 때문에 뷰포트 설정을 통해 페이지를 적절하게 보여줄 수 있습니다.

How to solve

다음과 같이 meta 태그를 이용하여 뷰포트를 설정할 수 있습니다 .

  <Head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </Head>

name: viewport 시 뷰포트 설정 의미
content : 뷰포트의 크기와 초기 확대/축소 배율 설정
- witdh=device-width : 뷰포트 너비를 디바이스의 가로 폭과 동일하게 설정
- initial-scale=1.0 초기 확대/축소 배율 1배로 설정

+) nextjs 뷰포인트(Viewport) 설정 방법을 알고 싶으신 분들은 해당 포스팅도 참고 부탁드립니다 :)

'Development knowledge > Web' 카테고리의 다른 글

[Web] RESTful API란? (0)	2023.04.07
[Web] JWT(JSON Web Token)란? (0)	2023.04.07

현재글[Web] 모바일 기기(mobile device) 화면 잘림 현상 원인 및 해결 방법 (+ viewport)

Dev Diary 💻