在移动浏览器上以不同方式显示模式

Question

我有一个由图像触发的模式，我已将其设置为显示在页面底部，如下所示：

.modal-dialog {
bottom:0;
position:fixed;
width:100%;
pointer-events:none;
}

这在桌面浏览器和safari上运行良好，但在chrome和firefox手机上显示在顶部。

有人知道是什么原因造成的吗？

提前感谢

Answer 1

把这个放在html页面的head标签里

<meta name="viewport" content="width=device-width, initial-scale=1">