koenpunt
11/1/2012 - 3:51 PM

iOS Media Queries

iOS Media Queries

<!-- IPAD 3 -->
<link rel="stylesheet" href="/stylesheets/ipad3.css" type="text/css"
	media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.5)" />
<!-- IPAD 2 -->
<link rel="stylesheet" href="/stylesheets/ipad2.css" type="text/css" 
	media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-max-device-pixel-ratio:1.5)" />
<!-- IPAD -->
<link rel="stylesheet" href="/stylesheets/ipad.css" type="text/css"
	media="only screen and (min-device-width:768px) and (max-device-width:1024px)" />
<!-- IPHONE 4 -->
<link rel="stylesheet" href="/stylesheets/iphone4.css" type="text/css" 
	media="only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px)" />
<!-- IPHONE 3 -->
<link rel="stylesheet" href="/stylesheets/iphone3.css" type="text/css"
	media="only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-max-device-pixel-ratio:1.5)" />
<!-- IPHONE -->
<link rel="stylesheet" href="/stylesheets/iphone.css" type="text/css" 
	media="only screen and (max-device-width: 480px)" />
<!-- RETINA -->
<link rel="stylesheet" href="/stylesheets/retina.css" type="text/css"
	media="only screen and (-webkit-min-device-pixel-ratio:2)" />