Question

我正在设计一个基本的笔记记录PWA，我的网站（https://cloudwerewolf.github.io）在桌面浏览器上工作正常，并且当从主屏幕在移动设备上作为PWA启动时，但是在移动浏览器中运行时从直接导航到链接，当点击其中一个时，所有textareas都会缩小，我希望textareas保持与之前相同的大小，而不是缩小。是因为键盘缩短了屏幕的感知宽度还是有另一个原因，它是如何修复的？

编辑：发现＆amp;解决了这个问题：

@media screen and (orientation:landscape) {
    textarea {
        width: 43.5%;
    }
    #notehead {
        width: 20.5%;
    }
    #reH {
        font-size: 24px;
    }
}
@media screen and (orientation:portrait) {
    textarea {
        width: 80%;
    }
    #notehead {
        width: 35%;
    }
}

当键盘出现在我的屏幕上时，由于视口宽度现在小于视口高度，CSS确定方向现在是横向的，并相应地更改了textareas和字体大小的大小。我拿出了一大堆代码，用宽度百分比替换为纵向模式放置到常规textarea {}和#notehead {} CSS区域，最大宽度以像素为单位，以防止textareas在桌面上变得太宽。

Answer 1

在CSS中，您将textarea配置为min-width: 80%，因此当屏幕尺寸减小时，textarea将减少直到达到此处的极限（80％），textarea不会减少

尝试，可能会将min-width: 80%缩减为min-width: 20%

请尝试在问题中显示您的代码，我们可以帮助您以这种方式解决问题，而不仅仅是链接到您的网站。

移动浏览器在输入输入时调整textareas的大小

1 个答案: