移动端输入框唤起键盘时页面布局错乱如何排查？
输入框唤起键盘时页面布局错乱通常是因为虚拟键盘改变了视口大小，通过设置 interactive-widget 属性可以控制这一行为。
检查视口与键盘的交互行为设置
移动端网页在输入框获得焦点时，浏览器通常会弹出虚拟键盘。键盘的出现会占用屏幕空间，从而改变视口的大小。默认情况下，虚拟键盘只调整视觉视口，而不改变布局视口，这可能导致页面布局发生错乱。为了解决这个问题，需要在 HTML 的 meta 标签中设置 interactive-widget 属性。该属性可以设置为 resizes-content，这会指示浏览器在键盘弹出时调整布局视口的大小，从而让页面布局能够适应新的空间。
检查页面的 head 部分是否存在 viewport meta 标签。如果存在，确认其 content 属性中是否包含 interactive-widget=resizes-content。如果没有设置该属性，或者设置为默认值，页面在键盘弹出时可能会出现布局挤压或滚动异常。确保该属性被正确设置，是解决布局错乱问题的第一步。
验证布局视口是否随键盘调整
设置 interactive-widget=resizes-content 后，需要验证布局视口是否真的发生了变化。可以通过在页面中添加一个固定高度的容器，并观察其在键盘弹出前后的高度变化来验证。当键盘弹出时，如果布局视口被调整，容器的可用高度应该会相应减小，从而触发滚动条或布局重排。
在浏览器开发者工具中模拟移动设备环境，并开启键盘。观察页面元素的位置和大小是否符合预期。如果布局视口没有调整，页面内容可能会被压缩或溢出。通过这种方式，可以确认设置是否生效，以及页面布局是否能够正确响应键盘的弹出。
排查其他可能影响布局的因素
除了 interactive-widget 属性外，还需要检查其他可能导致布局错乱的因素。例如，页面中是否存在固定定位的元素，这些元素可能会随着视口大小的变化而移动。另外，检查 CSS 中的 flex 布局或 grid 布局是否正确处理了视口大小的变化。确保所有元素都使用了相对单位，而不是固定的像素值，这样可以更好地适应视口的变化。
如果页面使用了 viewport-fit 属性，也需要确保其设置不会与 interactive-widget 属性冲突。viewport-fit 主要用于处理设备刘海屏等显示区域，而 interactive-widget 专注于处理键盘交互。两者需要协同工作，以确保页面在不同设备上都能正常显示。
确认最终布局效果与用户体验
在完成上述检查和调整后，最终需要确认页面的布局效果是否符合预期。输入框唤起键盘时，页面内容应该能够平滑地适应新的空间，不会出现明显的错乱或遮挡。用户应该能够顺畅地输入内容，并且能够方便地滚动查看其他内容。
如果在实际设备上测试时发现布局仍然有问题，可能需要进一步调整 CSS 样式或重新审视页面结构。确保页面在不同设备和浏览器上都能提供一致的用户体验，是移动端网页开发的关键。通过合理设置 interactive-widget 属性，可以有效地解决输入框唤起键盘时的布局错乱问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。