获取方向以适应媒体查询

Question

我正在尝试为ipad横向和纵向模式指定css，并且出于某种原因，景观效果不佳。看起来风景只是使用肖像模式。该网站是http://darthvixcustomsabers.com/ascend.html，我正在使用ipadpeek模拟器进行测试。

这是我的CSS，媒体查询介于中间。

body {background-image:url('../images/space1.jpg');
background-repeat: no-repeat center center;
    background-position: center;
    background-size: cover;
    width: 100%;
    min-height: 100%;
    }


body {color:white;}
a, a:visited { 
    color:#3399FF; text-decoration:none;}

div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}   
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}

#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; 
display: inline-block;
    }

#nav li { 
display: inline-block;
padding: 20px; 
margin-left: auto;
margin-right: auto;
}

#nav a {
text-decoration: none;
color: #3399FF;
padding: 8px 8px 8px 8px;
}

#nav a:hover {
color: #000000;
background-color:#3399FF;
}

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
        display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
    overflow: hidden;
}

.images img {
    float: left;
    margin: 0px;
}
div.glams {
  text-align: center;

}
.left {
  float: left;
  margin-left:20%;
  padding:10px;
   border:3px solid #585858 ;
}
.right {
  float: right;
  margin-right:20%;
  padding:10px;
   border:3px solid #585858 ;
}
p.v {
text-align:center;
}

@media only screen and (min-width: 768px) and (max-width: 770px)
and (orientation : portrait) {

    div.header{
        text-align:right;
        font-size:140%;
    }

    div.header1 {
        text-align:right;
        font-size:100%;
    }

    div.logo{
        margin-top:-40px;
    }

    div.logo 
    img {
        height:100px;
        width:200px;
    }   

    #nav{
        width:100%;
        height:3%;
        font-size: 100%;
        font-weight: bold;
        border-radius: 8px;
        margin:0;
        padding:0;
        text-align: center;
        margin-top:5%;
        margin-left:-14%;
    }

    #nav ul {
        height: auto;
        padding: 0px 0px;
        margin: 0;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc; 
        display: inline-block;
    }

    #nav li { 
        display: inline
        padding: 5px; 
        margin-left: auto;
        margin-right: auto;
    }

    #nav a {
        text-decoration: none;
        color:#3399FF;
        padding: 8px 8px 8px 8px;
        display: inline-block;
    }

    #nav a:hover {
        color: #000000;
        background-color: #FFF;
    }

    li:hover ul { 
        display: block; 
    }



 nav ul ul {
        display: none;
    }

    nav ul li:hover > ul {
            display: block;
    }

    div.qui {
        text-align:center;
        font-size:200%;
        text-decoration:underline;
        margin-top:15%;
    }

    div.specs {
        text-align:center;
        font-size:175%;
    }

    ul.qui {
        text-align:center;
        font-size:150%;
        list-style-type: none;
    }

    .images {
        overflow: hidden;
    }

    .images img {
        float: left;
        margin: 0px;
    }

    div.one {
      text-align: center;      
    }

    .left {
      float: left;
      margin-left:3%;
      padding:0px;
       border:3px solid #585858 ;
    }

    .right {
      float: right;
      margin-right:3%;
      padding:0px;
       border:3px solid #585858 ;
    }

    p.v {
        text-align:center;
    }
    div.glams 
    img {
    height:180px;
    width: 300px;
    }

@media only screen 
and (min-device-height : 768px) 
and (min-device-width : 1024px) 
and (orientation : landscape) {
body { background: green; } 


    div.header{
        text-align:right;
        font-size:140%;
    }

    div.header1 {
        text-align:right;
        font-size:100%;
    }

    div.logo{
        margin-top:-40px;
    }

    div.logo 
    img {
        height:80px;
        width:150px;
    }   

    #nav{
        width:100%;
        height:3%;
        font-size: 100%;
        font-weight: bold;
        border-radius: 8px;
        margin:0;
        padding:0;
        text-align: center;
        margin-top:5%;
        margin-left:-14%;
    }

    #nav ul {
        height: auto;
        padding: 0px 0px;
        margin: 0;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc; 
        display: inline-block;
    }

    #nav li { 
        display: inline
        padding: 5px; 
        margin-left: auto;
        margin-right: auto;
    }

    #nav a {
        text-decoration: none;
        color:#3399FF;
        padding: 8px 8px 8px 8px;
        display: inline-block;
    }

    #nav a:hover {
        color: #000000;
        background-color: #FFF;
    }

    li:hover ul { 
        display: block; 
    }



 nav ul ul {
        display: none;
    }

    nav ul li:hover > ul {
            display: block;
    }

    div.qui {
        text-align:center;
        font-size:200%;
        text-decoration:underline;
        margin-top:15%;
    }

    div.specs {
        text-align:center;
        font-size:175%;
    }

    ul.qui {
        text-align:center;
        font-size:150%;
        list-style-type: none;
    }

    .images {
        overflow: hidden;
    }

    .images img {
        float: left;
        margin: 0px;
    }

    div.one {
      text-align: center;      
    }

    .left {
      float: left;
      margin-left:3%;
      padding:0px;
       border:3px solid #585858 ;
    }

    .right {
      float: right;
      margin-right:3%;
      padding:0px;
       border:3px solid #585858 ;
    }

    p.v {
        text-align:center;
    }
    div.glams 
    img {
    height:180px;
    width: 300px;
    }
}

Answer 1

您可以通过CSS媒体查询识别方向

/* portrait */
@media screen and (orientation:portrait) {
    /* portrait-specific styles */
 }

/* landscape */
@media screen and (orientation:landscape) {
    /* landscape-specific styles */
 }