모바일 환경이 고려되지 않고 개발한 제품을 급하게 모바일 지원할 일이 생겼다.
개발과정에서 개발자 도구의 device mode를 활용하여 그때그때 확인하고 있었는데 기기를 선택해도 해당 기기와 배율이 맞지 않는 것처럼 느껴졌는데 역시나 적용이 안되고 있었다...
Device Mode
: 디바이스 모드는 모바일 뷰포트를 시뮬레이팅 해볼 수 있는 기능이다.
크롬 개발자도구를 켜면 좌측 상단 element 선택하는 아이콘 바로 옆에 위치하고 있다.
Dimensions를 Responsive로 설정하면 자유롭게 뷰포트의 크기를 지정할 수 있고, 특정 기기를 선택한 경우 해당 디바이스에서 쓰는 뷰포트 사이즈로 고정되게 된다.
디바이스 선택후에도 뷰포트 사이즈에 따라 적용해둔 CSS가 적용되지 않는다면 아래 설정을 확인해보면 된다.
해당 페이지를 그리는 html문서에 아래 메타 태그가 추가되어있는지 확인하고 없다면 추가해주면 원하는 대로 모바일 뷰포트 시뮬레이팅을 해볼 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1">
위의 코드는 MDN에 나와있는 모바일 최적화된 사이트들이 포함하고 있다는 코드이다.
content="width=device-width는 브라우저 너비를 장치 너비에 맞추겠다는 설정이고,
initial-scale=1 페이지가 처음 로딩될 때의 확대/축소 수준으로 최솟값은 0.1이고 최대는 10이며 기본값은 1이고 음수 값은 무시된다.
=====
참고 사이트
- https://developer.chrome.com/docs/devtools/device-mode/
- https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
