液体のデザインを使用した複数のタブレットの画面方向

Question

私はスクロールせずに（どちらの方向でも）画面の100％を占めるモバイルWebアプリケーションを作っています。

私は画面の異なる領域の位置を固定しています。私が知っている

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のメディアクエリがありますが、私は2つの方向の間に置くために何かを考えることはできません幅と高さの両方がそれぞれ正しいために100％を維持する必要があるので、

これは私のipadに正しく表示され、次に向きを変えてスクロールする必要があります（水平と垂直の両方）。向きを保持してページを更新すると、正しい位置のページが読み込まれます。

私はCSSでメディアクエリを使用してこれを行うにはとにかくですか、私はいくつかのJavaScriptにダイビングするつもりですか？ Android搭載の携帯電話やタブレットからiOSの携帯電話やタブレットまで、複数の携帯端末をサポートできるようにする必要があります。

Answer 1

高さ100％は、ビューポートの下までしか伸びません。とにかく、方向を使用する代わりに、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 */ 
}