模态在移动浏览器上的显示方式有所不同

Question

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

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

这在台式机浏览器和safari上运行良好，但在chrome和firefox mobile上显示在顶部。

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

预先感谢

Answer 1

将其放在html页面的head标签内

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