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 有任何问题。有任何想法吗？

score 1 · Accepted Answer

尝试更改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%;

score 0 · Accepted Answer

尝试放弃高度，并将底部设置为 0

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

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

2 回答 2