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?

James Holderness · Answer 1 · 2013-06-09T17:21:02.467

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.

thank you, I think I understand, but max-width and max-height still result with the same unfitting, what do you think? — Peter V, Jun 09 '13 at 16:59
@ValKalinic If you haven't already done so, you should also set the viewport metatag - see answer for more details. — James Holderness, Jun 09 '13 at 17:21

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 02 '13 at 07:28

yeyene

7,297
1
21
29

score 2 · Answer 3 · answered Jun 30 '13 at 11:45

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 ;)

score 2 · Answer 4 · answered Jul 01 '13 at 15:51

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 */
}

Adjusting layout for iPhone 5 resolution

4 Answers4

iPhone 5 media query