Javascript 移动浏览器在输入时调整文本区域的大小

我正在设计一个基本的笔记记录PWA，我的网站（）在桌面浏览器上运行良好，当作为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%;
    }
}

---

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

在CSS中，您将文本区域配置为

最小宽度：80%

，因此，当屏幕尺寸减小时，文本区域将减小，直到达到限制（80%），文本区域不会减小

尝试一下，也许可以将

最小宽度：80%

减少到

最小宽度：20%

---

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

在CSS中，您将文本区域配置为

最小宽度：80%

，因此当屏幕尺寸减小时，文本区域将减小，直到从这里达到限制（80%），文本区域不会减少

尝试一下，也许可以将

最小宽度：80%

减少到

最小宽度：20%

---

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

删除该行不会改变行为，为什么屏幕尺寸会减小？请查看您的网站并转到开发者控制台（按F12），搜索textarea元素并转到css属性：之后，将

最小宽度：80%

更改为

最小宽度：20%

。嘿@JJohnson，欢迎使用Stack Overflow-很高兴有你。我想你误解了这个问题，我的问题是，当我不希望移动浏览器上的文本区域缩小时，它会缩小，我不知道如何更改最小宽度来解决这一问题。也许您想尝试在

媒体屏幕中指定
将属性添加到
最小分辨率
或
最大分辨率
，这样，当用户试图从移动浏览器进入您的网站时，您将尝试扩展文本区域的宽度。删除该行不会改变行为，为什么屏幕尺寸会减小？查看您的网站并转到开发者控制台（按F12键），搜索textarea元素并转到css属性：之后，将
最小宽度：80%
更改为
最小宽度：20%
。嘿@JJohnson，欢迎使用Stack Overflow-很高兴有你。我想你误解了这个问题，我的问题是，当我不希望移动浏览器上的文本区域缩小时，它会缩小，我不知道如何更改最小宽度来解决这一问题。也许您想尝试在
媒体屏幕中指定
将属性添加到
最小分辨率
或
最大分辨率
，这样，当用户试图从移动浏览器进入您的站点时，您将尝试扩展textarea的宽度。