모바일 화면 크기 대응

 

 

처리방법

 

가변그리드 

픽셀대신 비율로 처리

#wrap {
width: 90%
}

 

미디어쿼리 

device 화면사이즈

@media(min-width:300pxd){
  .myclass{
    width:200px;
    height:150px;
  }
}

 

뷰포트

미디어쿼리로 수많은 기기의 화면 크기를 감지해야할 때 꼭 필요

 

 

 

 

 

 

 

 

모바일 웹

 

개발환경

viewport를 이용한 화면영역 크기 조절
메타태그를 사용하여 뷰포트를 지정

 

모바일 브라우저

<meta> 메타태그를 이용해서 기본 폭을 조절

 

크롬

모바일 모드
확장 프로그램 User-Agent Swicher For Chrome

 

메타태그

<meta charset="UTF-8">
<meta name="description" content="메타태그 설명">
<meta name="keywords" content="메타태그, meta, tag, html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

 

관련포스트

• 모바일 개발 기초