Working out how to target nexus 7(2013) over nexus 7(2012)

n7-2013-media-queries.md

Targeting Nexus 7 2012 & 2013

Media Query Differences

Demo here

---

###Nexus 7 2012

1280 x 800 pixels (216 ppi)

portrait

@media screen
  	and (max-device-width: 601px)
  	and (orientation : portrait) 
	and (-webkit-min-device-pixel-ratio: 1.331)
	and (-webkit-max-device-pixel-ratio: 1.332){
		
		.device-name:after{
	  		content:" \00a9  2012";
		}
			
}

landscape

@media screen 
	and (min-device-width: 602px) 
	and (orientation : landscape) 
	and (-webkit-min-device-pixel-ratio: 1.331) 
	and (-webkit-max-device-pixel-ratio: 1.332){
		
		.device-name:after{
	  		content:" \00a9  2012";
		}
		
}

###Nexus 7 2013

1920 x 1200 pixels (323 ppi)

portrait

@media screen 
	and (max-device-width: 601px)
	and (orientation : portrait) 
	and (-webkit-min-device-pixel-ratio: 2)
	and (device-aspect-ratio: 25/38){
		
		.device-name:after{
	  		content:" \00a9  2013";
		}
			
}

landscape

@media screen
	and (min-device-width: 602px)
	and (orientation : landscape) 
	and (-webkit-min-device-pixel-ratio: 2)
	and (device-aspect-ratio: 40/23){
		
		.device-name:after{
	  		content:" \00a9  2013";
		}
			
}