CODEWITHSUNDEEP
cssmedia-queries
Cameron
Cameron

Reputation: 28853

CSS media queries for iPhone

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 on desktop load desktop.css as well, but if on iPhone (or if user resizes browser window to size) load iphone.css instead BUT don't load desktop.css anymore, and also add in the orientation.css files based on if the user has moved the iPhone.

e.g. 

/*

    Theme Name: mywebsite

*/

@import "reset.css";

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

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

    @media all and (orientation:portrait)
    {
        @import "iphone-portrait.css";
    }

    @media all and (orientation:landscape)
    {
        @import "iphone-landscape.css";
    }
}

It has to be all done inside the stylesheet because of the way I am building my website and I only want to use one css file in the HTML.

Can anyone help me fix it up to what I want. Cheers.

Upvotes: 3

Views: 10737

Answers (2)

Teena Thomas
Teena Thomas

Reputation: 5239

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";
}

Upvotes: 1

Koes Bong
Koes Bong

Reputation: 1113

Your @import must come before all other content in your CSS.

If you want just 1 CSS file in the HTML, why not copy and paste all those imports and paste them where you're trying to call the imports, ie.

// css for reset.css

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    // css for desktop
}
...

Upvotes: 2

Related Questions