Android 手机响应式网页表单输入异常行为

我正在开发一个带有表单输入的响应式网页。在手机上进行测试时，当我点击输入字段输入内容时，屏幕会放大，左侧的输入文本框被截断，我输入的内容不会显示在屏幕上

以下是进入输入模式前的屏幕：

以下是进入输入模式时屏幕的外观：

下面是当我挤压屏幕并一直放大时的样子：

那么，我在响应性网页设计方面犯了什么错误，导致了这种奇怪的行为呢？我在手机上的Chrome和Firefox上测试了这个页面。测试时，浏览器中的“请求桌面模式”已关闭

在我的代码中，我怀疑唯一可能导致任何奇怪的部分可能是这一部分：

@media only screen and (orientation: landscape)
{   
    .main-box { width: 100%; }
    img.full    { width: 100%; }        

    .main-body
    {
        width: 600px;
        height: 80%;
        z-index: 1;
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translate(-50%, 0%);     
        background-color: #fff7;        
    }    
    ... /*other unrelated styling stuff*/
}

由于手机上的屏幕分辨率太多，我只能假设当屏幕处于纵向时，它是一个移动设备（手机和平板电脑一样）。当屏幕处于横向模式时，它最有可能显示在台式PC上（横向平板电脑和手机被视为PC屏幕），并将内容限制在以屏幕为中心的800px区域中显示

.main box是一个包含整个页面的div容器，其中包含一个将覆盖浏览器的整个客户端的

.主体是一个div，在纵向模式下宽度为100%，在横向模式下宽度为600像素，位于屏幕中心

我猜，可能导致这种奇怪行为的原因可能是，在输入模式下，部分屏幕区域被虚拟键盘占据，使实际显示区域变成了横向，因此布局被破坏

那么，有谁能帮我展示一下我需要什么巫术才能使输入模式正常工作（如果它们确实存在的话）？提前谢谢

---

或者，有人能告诉我如何确定手机的屏幕宽度吗？我有一部本机分辨率为FHD（1080 x 1920）的手机，但从我调整页面以适应浏览器屏幕时得到的信息来看，“虚拟”屏幕的宽度要小得多，可能在350到400px左右。

这发生在iPhone、safari和chrome手机浏览器中

下面是有关StackOverflow的帖子，以解决此问题：

---

希望对您有所帮助。

window.innerWidth

或

screen.width

可以提供设备的屏幕宽度（如果要在Javascript中使用）

无论何时我们想要获得响应，都不要使用

px

设置宽度和高度。使用

%，em或VW

.main-body { width: 600px; *** 

也许你想像这样使用它

.main-body { width: 80%;

---

这解决了缩放问题，非常感谢，但现在我的另一个问题仍然存在：我如何确定手机的“虚拟”屏幕宽度……感谢您的建议，但我必须坚持我的选择，因为我是一名长期的Windows应用程序开发人员，我更喜欢让事情在我的控制之下。依赖屏幕宽度的%并不是我想要的，因为1920px的80%与1366px的80%大不相同（我居住的地区最常见的LCD显示器分辨率——我的客户也在那里），我的客户希望所有设备——移动设备和台式机——都能有一致的感觉。