Programing/HTML
모바일 지원(viewport)
june._.note
2016. 9. 17. 22:49
현재 자신이 작업한 웹 페이지가 모베일에서 어떻게 보이는 확인하기 위해서는
(Chrome에서) F12를 눌러 개발자 도구를 실행시면 각각의 장치마다 해당 웹 페이지가 어떻게 보이는지 화면을 확인 할 수 있다.
html의 head 하위에 meta tag로 아래와 같이 viewport를 추가하면 처리 가능
<meta name="viewport" content="width=device-width, initial-scale=1.0">
위와 같이 처리하면 각 장치의 화면 크기에 맞추어 웹페이지를 표시하도록 도와 준다.
각각의 페이지 사이즈마다 웹페이지의 구성을 다르게 하는것은 CSS에서 처리해야할 사항.