iphone 5 landscape media query

Question

I've seen a lot of media queries for iphone 5 portrait orientation but none for the landscape mode, is there one? I'm asking because this site i'm working on for a client has separate media queries for portrait and landscape mode, and I added this iPhone 5 CSS media query to my portrait media query for iphone 4 like suggested, but wondering what to do with the landscape part

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen (min-device-width:640px) and (max-device-width:1136px) and (-webkit-min-device-pixel-ratio:2) {
    body {
        background:#2d2928 url(images/bg960.jpg) no-repeat center top;
        background-size:480px 163px;
        font-size:96%;
        font-weight:300;
        padding:0 1%;
    }
    .logo a {
        display:block;
        margin:0 auto;
        width:260px;
        height:77px;
        background:url(images/logox2.png) no-repeat center center;
        _background:none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/logox2.png',sizingMethod='crop');
        background-size:260px 77px;
    }
    #container {
        width:99%;
        margin:0 auto;
    }
    .frontimagewrapper {
        width:80%;
    }
    h1 {
        font-size:124%;
    }
    h2,h3,h4,h5, {
        font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
        letter-spacing:0.2em;
        font-size:100%;
    }
    .gallery h2 {
        font-size:96%;
    }
    .block h3 {
        font-size:96%;
    }
    .article h3 {
        font-size:100%;
    }
    .article h2 {
        font-size:106.6%;
    }
    p {
        font-size:0.9em;
    }
    .date {
        font-size:0.8em;
    }
    .copyright {
        font-size: 0.9em;
    }
}
/*/mediaquery*/
@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) {
    body {
        font-size:96%;
    }
    .frontimagewrapper {
        width:55%;
    }
    .blogleft img {
        max-width:60%;
        height:auto;
    }
    h1 {
        font-size:150%;
    }
    h2,h3,h4,h5, {
        font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
        letter-spacing:0.2em;
        font-size:100%;
    }
    .article h2 {
        font-size:118%;
    }
    .date {
        front-size:50%;
    }
    p {
        font-size:0.9em;
        line-height:1.825em;
    }
    .date {
        font-size:0.8em;
    }
    .copyright {
        font-size: 0.9em;
    }
}
/*/mediaquery*/

score 12 · Answer 1 · answered Jan 17 '13 at 20:08

12

Media query for iPhone 5 in portrait and/or landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
    /* CSS here */
}

Media query for iPhone 5 in landscape only

@media only screen 
and (min-device-width : 320px)
and (max-device-width : 568px) 
and (orientation : landscape) {
    /* CSS here */
}

answered Jan 17 '13 at 20:08

magzalez

1,396
2
14
25

6

I find myself going up to 767px (one pixel before the iPad) to catch any of the really big Android phones. – magzalez Aug 30 '13 at 17:34

score 0 · Answer 2 · answered Apr 24 '20 at 14:55

Still, you can specify the media query for the iPhone 5 and iPhone SE based on the "orientation" and "-webkit-device-pixel-ratio".

/* Only iPhone 5 and iPhone SE(portrait mode) */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (orientation:portrait)
{
    body {
        color:blue;
    }
}

/* Only iPhone 5 and iPhone SE(landscape mode) */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)
{
    body {
        color:red;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 Hello based on the device orientation my color will change
</body>
</html>

iphone 5 landscape media query

2 Answers2