移动端响应式网页表单输入异常问题排查求助

先结合你的测试场景和代码，拆解下核心问题：输入时屏幕自动放大、输入框被截断、内容无法显示，本质是视口配置缺失+横屏媒体查询的判定逻辑不准确导致的，下面给你一步步的修复方案：

1. 解决屏幕自动放大的问题 #

移动端浏览器默认会在输入框获焦时放大页面，你需要在HTML的<head>里添加标准的viewport元标签，禁止自动缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个标签会强制页面宽度匹配设备的逻辑像素，同时禁止浏览器自动缩放和用户手动缩放，从根源解决输入时屏幕放大的问题。

2. 修复横屏布局崩溃的问题 #

你用orientation: landscape判定桌面设备的逻辑有漏洞——移动端横屏时也会触发这个规则，但此时设备的逻辑宽度可能远小于600px，导致固定宽度的.main-body溢出视口，出现截断。

建议修改媒体查询条件，结合最小宽度来区分真正的桌面设备和移动端横屏：

/* 竖屏/小屏幕设备：main-body自适应满宽 */
.main-body {
  width: 100%;
  position: absolute;
  top: 50px;
  background-color: #fff7;
  z-index: 1;
  /* 保留其他原有样式 */
}

/* 仅当屏幕逻辑宽度≥600px时，启用桌面端固定宽度布局 */
@media only screen and (min-width: 600px) {
  .main-body {
    width: 600px;
    height: 80%;
    left: 50%;
    transform: translate(-50%, 0%);
  }
  .main-box { width: 100%; }
  img.full { width: 100%; }
}

这样修改后，只有当设备逻辑宽度达标（比如桌面横屏）时才会用固定宽度居中布局；移动端哪怕横屏，只要宽度不足600px，依然保持自适应满宽，避免输入框被截断。

3. 正确获取移动端屏幕宽度的逻辑 #

你提到的“虚拟屏幕宽度350-400px”是逻辑像素，而手机的1080×1920是物理像素——移动端浏览器会根据设备像素比（devicePixelRatio）转换物理像素为逻辑像素，保证页面内容在不同设备上的视觉大小一致。

如果需要在JS中获取准确的视口宽度，推荐用这两个API：

// 获取当前视口的逻辑宽度（包含滚动条）
const viewportWidth = window.innerWidth;
// 获取文档可见区域的宽度（不含滚动条）
const documentWidth = document.documentElement.clientWidth;

这两个值会自动适配虚拟键盘弹出后的视口变化，比直接读取物理像素更可靠。

额外优化建议 #

• 给.main-body添加box-sizing: border-box和max-width: 100%，避免内边距或边框导致宽度溢出：

  .main-body {
    box-sizing: border-box;
    max-width: 100%;
    padding: 0 16px; /* 可选，给输入框留左右边距，避免贴边 */
  }
  

• 调试时可以用Chrome DevTools的设备模拟器，勾选「Show virtual keyboard」快速复现虚拟键盘弹出后的布局问题。

内容的提问来源于stack exchange，提问作者Kw Choy