Different style depending on device's width and height

Question

I have to define different textarea heights, depending on the device:

• if the user is using an iPhone 4, the textarea's height must be 62px,
• if the user is using an iPhone 5, the textarea's height must be 106px.

This is my current CSS. It works for the iPhone 5, but if I load the page on an iPhone 4, it uses the style defined for the iPhone 5.

/* iPhone 2G-4S in portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) {
    textarea {
        height: 62px;
    }
}

/* iPhone 5 & 5S in portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
    textarea {
        height: 106px;
    }
}

Why isn't the page loaded in an iPhone 4 using the 62px value?