屏幕方向为流体设计的多个平板电脑

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%; 
} 

我知道有像下面

@media only screen and (orientation:portrait) 

在那里你可以切换纵向和横向之间的取向CSS媒体查询，但我想不出任何事物的两个方向之间放因为每个正确的宽度和高度都需要保持100％？

它正确显示在我的iPad上，然后你改变方向和需要滚动（水平和垂直）。如果我保持方向并刷新页面，它将加载正确位置的页面。

有没有办法做到这一点使用CSS的媒体查询或我会不得不潜水到一些JavaScript？我需要能够支持多种移动设备，从android手机和平板电脑到ios手机和平板电脑。

Answer 1

只是FYI。高度100％仅延伸到视口的底部。反正，而不是使用定位尝试使用最小宽度和最小高度媒体查询。并为不同的分辨率设置不同的中断点。

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