html - 具有流体设计的多个平板电脑的屏幕方向

Question

所以我正在制作一个移动网络应用程序，该应用程序应该在不滚动(向任一方向)的情况下占据 100% 的屏幕。

我对屏幕的不同区域有固定的位置。

    html, body{
    height: 100%;   
    margin: 0;
    padding: 0;
    width: 100%;
}

.site-header{
    position: fixed;
    top: 0px;
    height: 10%;    
    background: red;
    width: 100%;
}

.site-article{
    position: fixed;
    top: 10%;
    bottom: 10%;    
    background: white;
    width: 95%;
}

.site-footer{
    position: fixed;
    bottom: 0px;
    height: 10%;    
    background: blue;
    width: 100%;
}

.site-nav{
    position: fixed;
    top: 10%;
    bottom: 10%;
    right: 0px;
    background: green;
    width: 5%;
}

我知道有像下面这样的 css 媒体查询

 @media only screen and (orientation:portrait)

在哪里可以在纵向和横向之间切换方向，但我想不出在这两个方向之间放置什么，因为每个正确的宽度和高度都需要保持 100%？

它在我的 ipad 上正确显示，然后您更改方向并需要滚动(水平和垂直)。如果我保持方向并刷新页面，它会加载具有正确位置的页面。

有没有办法使用带有 CSS 的媒体查询来做到这一点，或者我是否必须深入研究一些 JavaScript？我需要能够支持多种移动设备，从 Android 手机和平板电脑到 iOS 手机和平板电脑。

Answer 1

仅供引用。高度 100% 仅延伸到视口(viewport)底部。无论如何，不​​要使用方向尝试使用 min-width 和 min-height 媒体查询。并针对不同的分辨率设置不同的断点。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}