I'm testing a website on an iPad 4th generation and its pixel size is: 2048px x 1536px, but it activates my "mobile" media query (in portrait view) which is 768px and below and it activates my "tablet" media query (in landscape view) which is 769px and 1024px.
I'm curious as to why it does this?
I'm using this meta tag in the head, and I'm sure this is why it's doing this,
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0) and (max-width: 768px)" />
<link href="tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1024px)" />
And I'm not complaining, I think this is the proper way it should work. I'm just confused on why it works? What is the magic that turns 1536px into 768px?
The Retina iPad and iPhone pretend to have fewer pixels that they really do, because otherwise most web sites would be unreadably small.
There isn't necessarily a 1:1 mapping from CSS pixels to display pixels - see A pixel is not a pixel is not a pixel for more information on this, and the W3C document EM, PX, PT, CM, IN... for a more official source.