CSS media queries for iPhone

Question

I have a website that will be displayed on both the desktop and on an iPhone using media queries to serve different stylesheets so for example ALWAYS load reset.css, but if

Answer 1

Why don't you use css for desktop as inline, and override it with css for iphone? Moreover, desktops are much wider than these dimensions - (min-device-width: 320px) and (max-device-width: 480px). (min-device-width: 320px) and (max-device-width: 480px) are dimensions of an iphone/smartphones (most of them atleast). Hence, the code should be:

@import "reset.css";

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
@import "iphone.css";
}

//1024px - max width of an ipad, min-device-aspect-ratio - detects desktop
@media all and (min-width: 1024px) and (min-device-aspect-ratio: 1/1)
{
@import "desktop.css";
}