CSS3 미디어쿼리와 스크린 경계 > 퍼블리싱강좌
링크
컨텐츠 정보
- 5,957 조회
- 0 추천
- 목록
본문
우선 해야할 일
반응형 웹을 하기 위해서 기본적으로 설정/선언하거나 포함해야 할 항목들이 있습니다.
viewport meta tag 설정
요약
아래코드를 <head></head> 에 넣으세요.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
긴설명
반응형 웹으로 디자인 하는 것이므로, iOS 기기에서 데스크탑 웹사이트 (레이아웃)을 보고 싶지는 않을 것입니다. 그러기에 모바일 스크린에 맞게 폭과 스케일을 설정하는 것입니다. 특히, 위 설정은 iOS 전용 설정입니다. Android는 위 설정없이 ‘적절하게’ 렌더링합니다.
width=device-width
모바일 브라우져 (특히 iOS 사파리)에서 디바이스 폭보다 큰 웹페이지를 불러오면 좌우 스크롤이 되도록 렌더링합니다. 이런 문제? 를 해결하기 위해서 width를 device-width로 설정하면 해당 기기의 폭에 맞추어서 웹 페이지를 렌더링합니다. 참고로 Android는 width 설정에 상관없이 화면폭에 맞춰서 렌더링합니다.
viewport 설정이 되어있지 않는 웹 페이지를 iPhone에서 봤을때 (왼쪽)와 viewport 설정이 되어 있는 경우의 iPhone에서 볼떄 (가운데), 그리고 viewport 설정과 상관없이 Android에서 볼때 (오른쪽): 출처 - https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4
-------------------------------------- ♠ 출처는 링크 참조 바랍니다. https://11q.kr ♠
관련자료
-
링크
댓글 0
등록된 댓글이 없습니다.