jquery - モバイル デバイス オーバーレイが画面に収まらない

Question

次の CSS を使用して、単純な div オーバーレイを作成しました。

position:absolute;
top:0;
left:0;
display:none;
cursor:default;
z-index:101;
width:100%;
height:100%;

jQuery を使用してフェード インします。すべてのブラウザで問題なく動作しますが、モバイル デバイスで表示すると、div の高さが 100% になりません。私も次のことを試しました：

divの寸法をscreen.width同じscreen.height...結果に設定する

タグをインデックスに追加する<meta name="viewport" content="width=device-width,initial-scale=1" /> ...これにより、大量のものが台無しになり、オーバーレイが電話の約25％の幅になりました....

これまでこのような問題に遭遇したことはなく、CSS に問題があるようには見えません。何か案は？

Answer 1

に変更position:absoluteしてみてくださいposition:fixed。

position:fixed;
top:0;
left:0;
bottom:0;
right:0;
opacity:.5;
cursor:default;
z-index:101;
width:100%;
height:100%;

Answer 2

高さを捨てて、底を0に設定してみてください

position:absolute;
top:0;
left:0;
bottom: 0;
right: 0;
display:none;
cursor:default;
z-index:101;

ただし、できればスクリーンがよいでしょう。