iPhone5横向媒体查询

我见过很多关于iPhone5纵向模式的媒体查询，但没有一个是关于横向模式的，是吗？我这样问是因为我为一个客户开发的这个网站对纵向和横向模式有单独的媒体查询，我像建议的那样将它添加到我对iPhone4的纵向媒体查询中，但不知道如何处理横向部分

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

---

iPhone 5纵向和/或横向媒体查询

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

---

仅在横向模式下对iPhone 5进行媒体查询

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

---

不过，您可以根据“方向”和“-webkit设备像素比”为iPhone 5和iPhone SE指定媒体查询

/*仅限iPhone 5和iPhone SE（纵向模式）*/
@仅介质屏幕和（最小设备宽度：320px）和（最大设备宽度：568px）
和（-webkit设备像素比：2）和（方向：纵向）
{
身体{
颜色：蓝色；
}
}
/*仅iPhone 5和iPhone SE（横向模式）*/
@仅介质屏幕和（最小设备宽度：320px）和（最大设备宽度：568px）
和（-webkit设备像素比：2）和（方向：横向）
{
身体{
颜色：红色；
}
}

文件
您好基于设备方向我的颜色将更改

我发现自己要达到767px（比iPad早一个像素）才能赶上任何一款真正的大型Android手机。