뷰포트 메타 태그는 모바일 반응형을 만들 때 필요
뷰포트(viewport)란, 웹 페이지에서 사용자의 보이는 영역(visible area)를 말함
width는 뷰포트의 가로 크기를 정합니다. 만약 500이란 값을 넣으면, 500만큼의 픽셀 개수를 가진 너비로 설정
device-width라고 지정했으니, 기기의 스크린 너비에 맞추라는 뜻
- <meta/> viewport width
- <meta/> viewport initial-scale
- <meta/> viewport user-scalable
- <meta/> viewport minimum-scale
- <meta/> viewport maximum-scale
보다 완벽한 webview를 위한 세팅들 | 수줍은 동그래 블로그
해당 글은 2019년 3월에 작성된 글 입니다. 🙏 App에서 webview를 이용해서 앱을 웹으로 대체하는 경우가 꽤 있다. 퍼포먼스 면에서는 아직 웹뷰가 네이티브뷰를 따라가기엔 아직 많이 부족하지만 별도의 업데이트 없이 View를 자유자재로 변경이 가능하고 한번의 작업으로 AND와 IOS 모두 변경이 가능하기 때문에 자주 View가 바뀌어야 하는 상황이거나 퍼포먼스가 크게 중요하지 않은 화면에서는 웹뷰가 훨씬 효율적이다.
https://shylog.com/settings-for-a-more-complete-webview/
반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리
이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 찾아볼 수 있습니다. 빠트릴 수 없는 기술이 된 만큼, 오늘은 반응형을 만들기 위한 몇 가지 방법들을 정리해봤습니다 🤘 이 글에서는 반응형을 위한 기본인 뷰포트와 미디어 쿼리를 다루며, 다음 글에서는 CSS 속성을 활용해 빠르게 반응형을 만드는 법을 다룰 생각입니다.
https://nykim.work/84
