I'm trying to get our responsive web app to display correctly on iPhone 5 as part of a series of 'bug fixes'.
The app is applying the css rules for a larger screen which means text is over-sized and forces elements to overlap.
I have tried:
@media only screen and (-webkit-min-device-pixel-ratio: 2) { /* css here */}
@media only screen and (device-aspect-ratio: 40/71) { /* css here */ }
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* css here */ }
..as suggested by various answers here on SO. I have also tried all of these queries separated by commas.
How do I force an iPhone 5 specifically (other iPhones seem to be rendering well enough) to use the smaller, intended text sizes?