Adjusting layout for iPhone 5 resolution - iphone

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

Answer 2

If you want to target more than just iOS devices, it's best to avoid the device media queries. On iOS those queries always reflect the portrait width and height, regardless of orientation. On Android and other operating systems, the device width and height will change based on orientation.
So if you want to use a media query that consistently matches the width and height of the current orientation across all devices, you should use max-width/max-height rather than max-device-width/max-device-height. This max sense for desktop browsers too, since you're more interested in the size of the browser window than you are the size of the user's monitor.
Another thing you should always do when working with media queries on mobile devices is to set the viewport metatag with width=device-width. If you don't do this, the media queries will often reflect a virtual viewport which isn't at all what you would expect.
For more information, I'd recommend reading this article from quirksmode.org.

Answer 3

Try to use this:
if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
CGSize result = [[UIScreen mainScreen] bounds].size;
CGFloat scale = [UIScreen mainScreen].scale;
result = CGSizeMake(result.width *scale, result.height *scale);
//here you can use height or width if depend for landscape or portrait
if(result.height == 960){
//here wat you need to load
}
}
Hope this help you or illuminate to other ways ;)

Answer 4

Why not break this down into a few different queries?
#media only screen and (max-width : 1024px) {
}
#media only screen and (max-width : 640px) {
}
#media only screen and (max-height : 1136px) {
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}
#media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
/* 1.25 dpr */
}
#media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){
/* 1.3 dpr */
}
#media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
/* 1.5 dpr */
}