CODEWITHSUNDEEP
iphoneioscssretina-display
Peter V
Peter V

Reputation: 2488

Adjusting layout for iPhone 5 resolution

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?

Upvotes: 2

Views: 1166

Answers (4)

yeyene
yeyene

Reputation: 7380

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

Upvotes: 3

Jason Lydon
Jason Lydon

Reputation: 7180

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

Upvotes: 2

BlackSheep
BlackSheep

Reputation: 1087

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

Upvotes: 2

James Holderness
James Holderness

Reputation: 23001

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.

Upvotes: 3

Related Questions