티스토리 뷰

Programming Languages/HTML

HTML 모바일웹 사이즈

sw편한세상 2011. 8. 14. 01:39
일반적인 웹페이지는 PC에 최적화 돼 있기 때문에 글씨크기나 그림 사이즈가 모바일의 작은 액정에서 보기에는 어려움이 있다.(확대하면 되지만서도..)

하지만 head에서 meta속성을 추가하면 모바일에서도 큰 글씨 및 자동개행문자가 추가되어 편하게 텍스트를 읽을 수 있다.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

 
바로 이 속성인데, 모바일 브라우저는 바다든 갤탭이든 아이폰이든 webkit을 기반으로 만들어졌다. 이 브라우저에는 PC브라우저 윈도우에 해당하는 viewport라는 것이 있는데 일반적으로 viewport는 980px로 설정되어 있는데, 모바일의 width가 980px보다 작기 때문에 PC의 1/3정도의 크기로 보이게 된다. (일반적으로 HVGA(320x480)에서..)
 그래서 meta속성으로 크기를 조정하는 것이다. 

content의 내용은 보면 아는 것이고...

이 속성만 적용하면 그림 사이즈는 적용되지 않는다.
그래서 img 태그를 이용해 그림을 불러올 땐 다름과 같이 style을 지정해줘야한다.

<img src="images/picture.png" style="max-width:100%;"/> 


이 img 태그에 max-width 속성을 지정해 주면, PC브라우저에서는 일반적인 사이즈로 보이게 되고, 모바일브라우저에서는 한 화면에 보여지게 된다.

'Programming Languages > HTML' 카테고리의 다른 글

iScroll 사용시 input, textarea등 컨트롤 입력 예외처리  (3) 2012.03.31
APM7 외부접속 설정  (2) 2011.09.09
HTML5 기초지식  (0) 2011.08.14
댓글
03-29 13:45
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday