@media for retina displays

I have a simple web site layout for large-screens: a full width header, then two panels which sit side by side in the middle with a full-width footer at the bottom.

I'm using @media css to make everything full-width, falling one underneath the other on screen-sizes of 1024px wide or less.

It works really well with one exception - a friend has an iPad which is 1024px wide but it's a retina display with a 2x pixel density (thus acts like a 2048px width) - but my site is switching to small-screen mode because of the @media command being based on screen width.

I've trawled the internet to look for answers but it seems only Opera supports max pixel density. If a apply min pixel density, it affects normal screens.

Anyone else had this problem - any ideas?