Получение ориентации для работы с медиа-запросами

Question

Я пытаюсь указать css для ландшафтного и портретного режима ipad, и по какой-то причине пейзаж не играет хорошо. Похоже, пейзаж просто использует портретный режим. На веб-сайте 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 */ 
}