Bootstrap 4模态背景无法涵盖移动设备上的完整视图

Question

我在项目中使用Bootstrap 4.5。该模式在桌面上显示正常。但是当切换到移动设备时，模式背景只是页面的一部分。下面是我的模态代码：

<div class="modal fade " data-easein="expandIn" id="Modalone" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">
            <span aria-hidden="true">&times;</span>
        </button>
                        <img src="https://i.imgur.com/voj7Bgq.png" width="80%" height="80%">
                    </div>
                </div>
            </div>
        </div>

这是用于模态的css代码：

.modal-dialog {
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: auto !important;
}

.modal-content {
    background-color: transparent !important;
}

.modal-body {
    background-color: transparent !important;
    height: 100% !important;
}

.close {
    color: #fff !important;
}

 ::selection {
    color: none;
    background: none;
}

@media (min-width: 320px) and (max-width: 480px) {
            html,
            body,
            svg {
                height: 100%;
                width: 100%;
                min-height: 1777px;
                min-width: 1000px;
            }
}

这是我得到的结果：

我该怎么做才能在不同设备上完全覆盖背景？

Answer 1

导致此错误的代码块在@media部分中，其中包括了最小宽度和最小高度。我删除它后，该错误消失了。