CSSモバイルデバイスのサイドバーの配置に関する問題

Question

サイドバーメニューに問題があります。サムスンギャラクシーノート2やクロムブラウザの位置などのいくつかのアンドロイドデバイスでは、メニューの固定と実際の位置が失敗し、メニューが私のウェブサイトに表示されます。ここにCSSコードがあります。私は解決策を探し出しました。使用する必要があるだけの回答です。

backface-visibility: hidden; and -webkit-transform:translateZ(0); 

私はそれをやったが、まだ問題は残っています。私はモバイル互換性のWebサイトを作成する初心者で、何が原因で問題が発生しているのか理解できません。あなたの助けを願います。

nav { 
    background-color:White; 
    padding-right: .25em; 
    position: fixed; 
    left: -25em; 
    top: 0; 
    padding-top: 3em; 
    box-sizing: border-box; 
    z-index: 300; 
    height: 100%; 
    -webkit-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform:translateZ(0); 
    backface-visibility: hidden; 
} 

nav.active 
{ 
left: 0; 
overflow:auto; 
} 

    <script type="text/javascript"> 
//jquery for switching the class 
$('#mobile-sidebar').click(function (event) { 
     $('nav').toggleClass('active'); 
}); 
</script> 

P.S.私の悪い英語のためにSry。

Answer 1

@mediaルールを使用すると、さまざまなメディアタイプ/デバイスに異なるスタイルルールを定義できます。

@media screen and (min-width: 480px) { 
    nav { 
    background-color:White; 
    padding-right: .25em; 
    position: fixed; 
    left: -25em; 
    top: 0; 
    padding-top: 3em; 
    box-sizing: border-box; 
    z-index: 300; 
    height: 100%; 
    -webkit-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform:translateZ(0); 
    backface-visibility: hidden; 
} 

nav.active 
{ 
left: 0; 
overflow:auto; 
} 

} 

三星銀河（注）のための最小幅チェックデバイス（幅）あたりとしてモバイル互換性と変化するCSSの@media規則を使用する2.試み。