html - 如何避免移动 html 中输入的缩放问题？

Question

我遇到了一个问题，我的网站在移动设备上看起来不错，而在 PC 上，当您尝试输入时出现问题，由于某种原因，网站“缩小”并使所有内容都变得非常小，我该如何避免这种情况？

在我看来，这是某种缩放错误，但我无法在其他网站上复制它，所以我不明白出了什么问题

我网站上的图像是 svg 和 png，但是为了安全措施，它们被设置为背景（这样普通用户无法右键单击它们并下载它们），因此我刚刚创建了一个具有一定高度和宽度的 div图像比例

萨斯：

.content .contact{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;

    .layout{
        background-image: url('../'+$assets-path+'img/sobre.png');
        background-size: cover;
        $ratio:161.73/188.41;//h/w
        $height: 80vh;
        $drop-shadow-margin: 7.066/188.41;//shadow/width

        padding-top: 1%;
        box-sizing: border-box; 

        height: $height * $ratio;
        width: $height;
        margin-left: $height * $ratio * $drop-shadow-margin;

        display: flex;
        justify-content: center;

        form{
            margin-right: 4%;
            margin-top: 5.6%;
            box-sizing: border-box; 

            width: 88.2%;
            height: 55%;
            
            align-self: flex-start;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            // background-color: blue;

            input{
                margin-bottom: 1%;
                box-sizing: border-box;
                width: 70%;

                border-radius: 6px;
                border: 1px lightgray solid;
                padding: 2%;

                &:focus{
                    outline: none !important;
                    border-radius: 6px;
                    border: 1px lightblue solid;
                }
            }

            textarea{
                margin-bottom: 3%;
                box-sizing: border-box;
                width: 70%;
                height: 35%;
                resize: none;
                border-radius: 6px;
                border: 1px lightgray solid;
                padding: 2%;
                &:focus{
                    outline: none !important;
                    border-radius: 6px;
                    border: 1px lightblue solid;
                }
            }

            button{
                background-color: #2A9D8F;
                border:none;
                width: 40%;
                height: 10%;
                border-radius: 10px;
                color: white;
                outline: none !important;
                transition: all 0.2s ease-in-out;
                font-size: 65%;
                &:hover{
                    background-color: #264653;
                    
                }
            }
        }
    }

    @media only screen and (max-width:600px){
        .layout{
            $ratio:161.73/188.41;//h/w
            $width: 80vw;
            $drop-shadow-margin: 7.066/188.41;//shadow/width
            align-self: flex-end;

            margin-bottom: 10vh;

            height: $width * $ratio;
            width: $width;
            margin-left: $width * $ratio * $drop-shadow-margin;

            

            form{
                background: #f7f7f7;
                height: 50vh;
                margin-bottom: 33%;
                margin-top:0;
                align-self: flex-end;
            }
        }
    }
}

HTML：

<div class="content">
    <div class="welcome" id="welcome">
        <div class="logo"></div>
        <h1>Title</h1>
        <h3>Subtitle</h3>
        <h3>Sutbtitle</h3>
        <h2>Slogan</h2>
        <a class="down" href="#who"><div class="arrow"></div></a>
    </div>
    <div class="who" id="who">
        <div class="page">
            <div class="text">
                <h1>¿Quiénes somos?</h1>
                <p>Lore</p>
            </div>
        </div>
    </div>
    <div class="courses" id="courses">
        <div class="overlay">
            <div class="course">
                <h1>Curso de Alfabetización Digital</h1>
                <p class="left">El próximo genio de la oficina serás tu</p>
                <p>Hoy comienzas tu curso</p>
                <div class="links">
                    <a href="#">Más información</a>
                    <a href="#">Inscríbete ya</a>
                </div>
            </div>
            <div class="phone"></div>
        </div>
    </div>
    <div class="contact" id="contact">
        <div class="layout">
            <form action="">
                <input type="email" placeholder="Correo (e-mail)" required>
                <input type="text" placeholder="Asunto" required>
                <textarea placeholder="Cuerpo" required></textarea>
                <button type="submit">Enviar</button>
            </form>
        </div>
    </div>
</div>

标签： htmlcssmobilesass