javascript - 输入输入时，移动浏览器会调整文本区域的大小

Question

我正在设计一个基本的笔记 PWA，我的网站 ( https://cloudwerewolf.github.io ) 在桌面浏览器上运行良好，并且当作为 PWA 从移动设备的主屏幕启动时，但是当在移动浏览器中运行时，从直接导航到链接，当单击其中一个时，所有文本区域都会缩小，我希望文本区域保持与以前相同的大小而不是缩小。是键盘缩小了屏幕的感知宽度还是有其他原因，如何解决？

编辑:发现并修复了问题:

@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%;
    }
}

当键盘出现在我的屏幕上时，由于视口(viewport)宽度现在小于视口(viewport)高度，CSS 决定方向现在是横向，并相应地更改了文本区域的大小和字体大小。我取出那段代码并将其替换为放置在常规 textarea{} 和 #notehead{} CSS 区域中的纵向模式的宽度百分比，最大宽度以像素为单位，以防止文本区域在桌面上变得太宽。

Answer 1

在您的 CSS 中，您将 textarea 配置为 min-width: 80%，因此当屏幕尺寸缩小时，textarea 将缩小直到达到限制 (80%)，从这里开始，文本区域不会减少。

尝试，也许将 min-width: 80% 减少到 min-width: 20%

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