移动设备上的响应式视图问题表单元素

Question

我的网站在移动设备上有问题。当我点击输入字段来写东西时，表单大小发生变化......我该如何解决？我添加到表单背景（css- resize:none; 但它不起作用。）你可以在这里看到！ Screen View

谢谢！

Answer 1

您的问题是 - 取决于块的高度 .formular-bg 。当键盘处于打开状态时 - 虽然视口高度会发生变化。 85hv - 它取决于视口高度，当键盘出现时会发生显着变化。

.formular-bg {
    background: rgba(255, 254, 254, 0.93);
    width: 100%;
    height: 60vh; /*make it 'auto' or remove*/
    float: right;
    margin-top: 10%;
    resize: none; /*it's not going to work with fixed height*/
}

还有这个

@media screen and (max-width: 600px) {
.formular-bg {
    background: rgb(248, 248, 248,0.9);
    width: 100%;
    margin-top: 20%;
    margin-left: 5%;
    text-align: center;
    height: 85vh;/*make it 'auto' or remove*/
    resize: none;
}
}

移动设备上的响应式视图问题表单元素

Responsive View Problem Form Elements on Mobile

html

css

forms

responsive-design