屏幕方向爲流體設計的多個平板電腦

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