css3 media queries: iPad overwrite iphone4 (retina) rules
Seems that iPad rules overwrite iPhone4 related rules.
How can I solve this problem?

    /* iPad */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
        #theDiv { width: 400px; }
    }
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
        #theDiv { width: 600px; }    
    }
    
    
    /* iPhoneRetina */
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
        #theDiv { width: 200px; }
    }
css3 media queries: iPad overwrite iphone4 (retina) rules
===

Seems that iPad rules overwrite iPhone4 related rules.
How can I solve this problem?

    /* iPad */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
        #theDiv { width: 400px; }
    }
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
        #theDiv { width: 600px; }    
    }
    
    
    /* iPhoneRetina */
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
        #theDiv { width: 200px; }
    }