[CSS] phone, tablet 구별하기(media query)

Media Query에서 디바이스의 넓이를 구하기 위해서 사용되는 명칭은 두가지다.

max-width 와 max-device-width 가 있는데 각각 다른 특징을 가진다.

max-width 는 현재 웹뷰에서의 상대크기, 즉 device-ratio가 적용된 사이즈를 말한다.

iphone5의 경우 device-ratio 는 2, 실 디바이스 넓이는 640pixel이다.

하지만 max-width에는 320pixel로 대응된다.

이말은  device-ratio(안드로이드에서의 density)가 현재 웹뷰에서 적용되는 1pixel의 크기와 동일하다고 볼 수 있다.

max-device-width는 위와 반대로 실제 디바이스 넓이를 기준한다.

ratio와는 상관없이 실제 픽셀의 기준을 적용시킨다는 의미다.

나는 max-device-width를 사용하지 않고, max-width만 사용하여 phone과 tablet을 구분하였다.

/*mobile*/
@media all and (max-width: 640px) {
	
	.ui-mobile .ui-page {
		width: 100%;
		left: initial;
	}
	
	.sidebar {
		display : none;
	}
}
/*tablet */
@media all and (min-width:641px) { 
	stepbar {
		width: initial;
		left : 17.063em;
		right : 0;
	}
	
	.ui-mobile .ui-page {
		left : 17.063em;
		right : 0;
		width : initial;
	}
	
	.sidebar {
		width : 17.063em;
		display : initial;
	}
} 

기준을 640px로 잡은 이유는 현재 phone중에 device-width가 가장 높은 폰이 

옵티머스 G 프로 인데, 가로모드일때 width가 무려....1920pixel이다. 

다행히도, ratio가 3이라서 640px 이내로 적용이된다.

나중에 더 좋은 폰이 나오고, 해상도가 더 높은 폰이 나온다고 하더라도,, 위의 Media Query는 

변하지 않을 것 같다는 생각이 든다.