Question

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!

Answer 1

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