CODEWITHSUNDEEP
cssipadcordova
MeltingDog
MeltingDog

Reputation: 15404

PhoneGap: How to get iPad specific CSS to work?

I am building a PhoneGap/Cordova project for iPhone.

I have 2 css files - one for general CSS rules and one for iPad relevant css that look like this:

    <!--Main Style Sheet-->    
    <link rel="stylesheet" href="css/styles.css" />
    <!-- iPad specific css-->
    <link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />

The issue is that the iPad css is just behaving like normal css. CSS I put in there appears when I run both iPhone and iPad simulators.

Can anyone help me out?

Thanks!

Upvotes: 1

Views: 2155

Answers (3)

Matt Wagner
Matt Wagner

Reputation: 920

In case the aforementioned solutions do not solve the problem for some readers, this question is directly relevant to responsive web design.

I would recommend utilizing only one style sheet with a media query inside of it.

@media screen and (max-width:768px){
    /* Device Specific CSS rules here */
}

I have chosen max-width here because anything above that will render the normal CSS. You my then set up another media query with max-width of approximately 500px to target smart phones. Keep in mind that the media query automatically inherits all of the normal CSS rules specified and the only rules that need to be defined inside of the media query is the device specific styles.

This does exactly the same thing; however, this only requires the browser to parse one style sheet, generating a faster load time (minimal, but faster none-the-less.

When using a media query, you are also required to have a viewport meta tag in your HTML. Otherwise, your devices will render the same CSS as a desktop.

Also, CSS3 Media Queries are supported by most modern mobile browsers.

Upvotes: 0

ppsreejith
ppsreejith

Reputation: 3438

max-device-width gives us a maximum not a minimum, so it will affect all devices below 768 px including the iphone. Giving a min width too should fix it. Probably (min-device-width:481px)

Upvotes: 1

Marcin
Marcin

Reputation: 802

For iPad you want min-device-width, not max-device-width (ie. an iPad has a minimum width of 768px in Portrait mode)

Upvotes: 1

Related Questions