모바일 페이지 테스트

모바일 페이지 테스트  

 

http://mobitest.akamai.com/m/index.cgi 

 

 

 

 

테스트 하고 싶은 웹 페이지의 URL과 장치 이름을 입력한다.

View HAR file을 클릭해서 그래프 형식의 파일정보를 볼 수 있다.

 

 

이미지 최적화

http://blog.cloudfour.com/responsive-imgs-part-2/

 

css:

/* default */
#img1 {
background-image: url(‘small.jpg’);
width: 200px;
height: 200px;
}

 

@media screen and (min-width: 500px){
#img1 {
background-image: url(‘large.jpg’);
width: 400px;
height: 400px;
}
}

 

viewport<meta>

 

 모바일장치 해상도에 맞추기 maximua-scale을 1로 하면 사용자가 페이지 확대를 할 수 없다. 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

 

모바일에서 줌기능

<meta name="viewport" content="width=device-width, initial-scale=1/>

 

 

 

출처: http://oakj.blog.me/90167208121