移动设备覆盖不适合屏幕

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;

但是，如果可能的话，屏幕会很好。