Adjusting layout for iPhone 5 resolution

Question

In an HTML project, I'm using css to adjust the content layout for specific screen sizes, e.g. the iPad landscape;

/*
##########################################################################
##########################################################################
    iPad Layout Landscape: 1024px.
    Content-Element width: 896px.
    Gutters: 24px.
    Outer content margins: 64px.
    Inherits styles from: Default Layout.
##########################################################################
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    
##########################################################################
##########################################################################
*/

@media only screen and (max-device-width: 1024px) and (orientation:landscape) {

}

and that one works but for iPhone 5 portrait, I'm using;

  /*
iPhone 5 portrait view
*/
@media screen and (max-device-width: 640px) and (max-device-height: 1136px) and (orientation:portrait) {
}

which doesn't work, that is it's shown as the iPhone 4 version (

/*
######################################################################### 
##########################################################################
        Overrides styles for devices with a 
device-pixel-ratio of 2+, such as iPhone 4.
######################################################################### 
##########################################################################
*/

@media 
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
    }

).
The point is, these work for the devices described but on the iPhone 5, it is shown with the iPhone 4 settings, it needs to be made for the Retina 4-inch properties

Any ideas why and how to make it work?

Answer 1

Try this media query?

iPhone 5 media query

@media screen and (device-aspect-ratio: 40/71) {
    /* styles for iPhone 5 goes here */
}

*SO Link iPhone 5 CSS media query