html - Materialise - 模态在移动设备中正在缩小

Question

我用 materialziecss 库完成了这个程序。

MY Model IS like this first

But when I try to focus on that and try to type something it looks like this

我不知道当我在上面打字时它会缩小。我在此使用的代码如下:

<div id="modal2" class="modal  modal-fixed-footer">
    <div class="modal-content">

        <h5 class="text-center" style="color:#33383b; font-weight:bold;">Fill your details</h5>
        <br>
        <form>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">&nbsp; &nbsp;First Name</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">&nbsp; &nbsp;Last Name</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">&nbsp; &nbsp;Email</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="password" class="validate">
                    <label for="last_name">&nbsp; &nbsp;Password</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="dob" type="text" class="datepicker">
                    <label for="dob">&nbsp; &nbsp; Date Of Birth</label>
                </div>
            </center>
        </form>
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="modal-action btn waves-effect waves-green">SignUp</button>
            <button class="modal-action modal-close btn waves-effect waves-green">Close</button>
        </div>
    </div>
</div>

我所做的样式如下:

#modal2{
    width:100% !important;
}

Answer 1

您还必须设置 max-width: 100%。如果你想要全屏模式试试这个:

#modal2 {
 max-width: 100%;
 width: 100%;
 max-height: 100%;
 height: 100%;
}

这应该可以，如果不行，请尝试添加 !important。