移动端表单容器适配问题求助：页面内容被截断无法正常查看

我是前端新手，正在制作一份工作用的Site Report Sheet表单。在三星Galaxy、iPhone XR等移动端设备查看时，出现以下问题：

• 页面顶部无法查看，且无法滚动到顶部
• 底部内容被截断
• 表单侧边被裁切

我尝试过调整container的top、bottom属性，修改宽高单位为百分比、设置overflow为auto，以及调整body样式等，但均未解决问题。相关代码如下：

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
  margin: 20%;
  padding: 0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: #ececec;
}
.container{
    background-color: #ffffff;
    min-width: 80%;
    overflow: auto;
    max-height:min-content;
    height:auto;
    padding: 3%;
    transform: translate(-50%,-50%);
    position: absolute;
    left: 50%;
    top: 80%;
    border-radius: 1%;
    box-shadow: 20px 30px 25px rgba(0,0,0,0.15);
}

.container .form {
    margin-top: 30px;
}

.form .input-box {
    width: 100%;
    margin-top: 2%;
}

.input-box label {
    color: #333;
}

.form :where(.input-box input, .select-box,) {
    position: relative;
    height: 50px;
    width: 100%;
    outline:none;
    font-size: 1rem;
    color: #707070;
    margin-top: px;
    border: 2px solid #ddd;
    border-radius: 1px;
    padding: 0 15px;
}

h1{
    font-size: 30px;
    text-align: center;
    color: #1c093c;
}

p{
    position: relative;
    margin: auto;
    width: 100%;
    text-align: center;
    color: #606060;
    font-size: 14px;
    font-weight: 400;
}
form{
    width: 100%;
    position: relative;
    margin: 30px auto 0 auto;
}
.row{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-gap: 20px 30px;
    margin-bottom: 20px;
}
label{
    color: #1c093c;
    font-size: 14px;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.flex-row {
    display: flex;
}

.wrapper {
    border: 1px solid #4b00ff;
    border-right: 0;
}

canvas#signature-pad {
    background: #fff;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

button#clear {
    height: 100%;
    background: #4b00ff;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

button#clear span {
    transform: rotate(90deg);
    display: block;
}


textarea,
input{
    width: 100%;
    font-weight: 400;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1.2px solid #c4cae0;
    margin-top: 5px;
}


textarea{
    resize: none;
}
textarea:focus,
input:focus{
    outline: none;
    border-color: #6f6df4;
}

button{
    border: none;
    padding: 10px 20px;
    background: linear-gradient(
        130deg,
        #6f6df4,
        #4c46f5
    );
    color: #ffffff;
    border-radius: 3px;
}

@media screen and (max-width: 500px) {
    .form .column {
      flex-wrap: wrap;
    }
  
    /*trying to style the button to be wrapped */
    .upload .up {
      flex-wrap: wrap;
    }
  }

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Form</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
    <!--Signaure pad link-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/4.1.7/signature_pad.umd.min.js"></script>
</head>

<body>
    
    <section class="container">
        <h1>Site Report Sheet</h1>
        <form action="#" class="form">

            <div class="row">
                <div class="column">
                    <label for="issue">Client details</label>
                    <textarea id="issue" placeholder="" rows="3"></textarea>
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="issue">Site Name & Address</label>
                    <textarea id="issue" placeholder="" rows="3"></textarea>
                </div>
            </div>


            <div class="row">
                <div class="column">
                    <label for="number">WIS Number</label>
                    <input type="text" id="number" placeholder="">
                </div>

                <div class="input-box">
                    <label>Date</label>
                    <input type="date" required/>
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="issue"></label>
                    <textarea id="issue" placeholder="Type here" rows="3"></textarea>
                </div>
            </div>

            <h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT IN <u>WORKING ORDER</u></h4> <br>

            <div class="row">
                <div class="column">
                    <label for="name">Name</label>
                    <input type="text" id="name" placeholder="">
                </div>

                <!--Signature pad-->

                <div class="flex-row">
                    <div class="wrapper">
                        <canvas id="signature-pad" width="400" height="200"></canvas>
                    </div>
                    <div class="clear-btn">
                        <button id="clear"><span> Clear </span></button>
                    </div>
                </div>

                <div class="row">
                    <div class="column">
                        <label for="number">On behalf of</label>
                        <input type="text" id="number" placeholder="">
                    </div>
                </div>

                <div class="column">
                    <label for="ename">Engineers Name</label>
                    <input type="text" id="ename" placeholder="">
                </div>


                <div class="column">
                    <label for="ename">Engineers Name</label>
                    <input type="text" id="ename" placeholder="">
                </div>



            </div>




        </form>
    </section>
    </div>
</body>

</html>

问题截图说明 #

• 三星Galaxy设备：页面顶部无法查看
• 通用移动端问题：无法滚动到页面顶部
• iPhone XR设备：表单侧边被裁切

内容的提问来源于stack exchange，提问作者Axelle