网页客服按钮挡住手机内容：横竖屏、放大阅读与键盘弹出分别检查
用具体控件、横竖屏、缩放与键盘往返小样定位网页客服遮挡，说明视觉视口与布局范围，给出复现记录和修订后验收标准。
网页底部的“提交”被客服气泡盖住，输入回复时发送键又挤到键盘后面，这两种现象都叫“挡住”，原因却未必相同。前者可能是浮动入口与页面按钮占用同一位置，后者可能发生在键盘打开、可见区域变小以后。处理美洽网页接待入口时，先确认究竟是哪一块内容无法阅读或点击，再把出现条件还原出来，比反复刷新更容易找到需要改动的页面。
先把“遮挡”说到具体控件
让反馈者指出一个对象，例如“商品详情最下方的确认按钮”“咨询输入框的最后一行”或“聊天窗口的关闭入口”。如果整页可以滚动，只是初次打开没看见下面内容，与滚到底仍被浮层盖住是不同问题。先关掉聊天面板，保留小气泡，看目标能否操作；再打开面板重复一次。这样能区分气泡本身、展开面板和原页面各自的影响。
截取问题位置时，保留浏览器地址栏与屏幕方向，不必拍进真实订单。还应注明从浏览器直接打开，还是从其他应用的内嵌网页进入；相同手机型号上的这两个环境也可能不同。不要只写“苹果机不行”，而要写实际浏览器名称、系统版本、问题页面路径，以及是否已经放大文字。页面运营同事可以先用演示表单重现，避免为了拍图反复提交真实咨询。
竖屏和横屏：先查固定位置是否挤占任务
从竖屏正常比例打开页面，滚动到被挡按钮，关闭聊天后点击一次演示目标。随后打开客服面板，看正文能否继续滚动，关闭控件是否仍可见。再转横屏重做。横屏通常更宽却更矮，不能因为电脑预览足够宽，就认为手机横屏也一定有足够的对话高度。浏览器工具栏伸缩会进一步影响当前可见高度。
对站点维护者，第一项检查不是把所有元素的层级提高，而是确认浮动入口与业务底栏是否有共同的布局安排。两者都固定在右下或底部时，简单加大层级只会换成另一方被遮。可以为正文末尾保留足够空间、调整小屏入口位置，或在不丢失咨询入口的情况下收拢面板。具体采用哪种，要同时确认浮动按钮不盖住表单、付款确认、翻页或关闭控件。本站重复进线的上下文接续说明适合窗口恢复后继续处理原事项，但接待交接本身不能修复网页遮挡。
放大阅读：不要靠禁止缩放掩盖问题
有人会在客服窗口出现问题后关闭页面缩放，结果窗口看似不乱，视力较弱的访客却无法读清文字。合理的检查方向是放大后文字能否换行、重要动作能否到达，而不是要求用户一直用最小字号。W3C 的重排说明强调内容在较窄的等效视口中仍可使用，并对确有二维布局需要的内容作了区分；不能把一张复杂图表的例外，直接套到整段客服文字上。
实际检查时先在手机用双指适度放大一段演示对话，再移动到发送区和关闭入口。若按钮完全消失，缩回只是临时脱困，不是验收通过。维护者可另外用桌面浏览器的页面缩放和窄窗口检查文字重排，但桌面模拟不能代替手机键盘试验。文字大小设置、页面缩放与系统显示缩放也不要同时调整，先保留一种变化，否则无法知道是哪项让窗口重排。
键盘弹出：布局视口和视觉视口为什么要分开
MDN 将移动网页的布局视口与视觉视口区分开来。布局视口参与页面排版；视觉视口代表此刻实际能看到的部分。捏合缩放可能让视觉视口变小，屏幕键盘也可能缩小可见区域而没有同样改变布局范围。因此，一个按较大范围定位的发送栏，可能仍在页面中，却落到了键盘遮住的位置。不同浏览器的处理方式还会有差异，不能仅凭屏幕截图推断是客服服务器没有响应。
测试按“未聚焦输入框、轻点输入框、键盘显示、输入两行、收起键盘”顺序进行。每一步都看输入框、发送按钮和最近一条对话，不只看面板上边缘。先不要真的发送，使用“这是布局检查，尚未提交”作为演示文字。收起键盘后若出现大片空白或面板回不到原位，也要作为第二个问题保存，而不是只记录键盘打开的一瞬间。
开发者可在自己获授权的页面读取顶层窗口的 window.visualViewport，观察其 height、offsetTop 与 scale，并留意 resize、scroll 事件。它们是定位线索，不是把高度直接写死成某个数值的理由。若客服在 iframe 内，不能把该框架自己的可见区域读数误当成整个手机屏幕；MDN 特别指出顶层窗口的视觉视口与布局视口差异才是这里的关键。
用一份填好的小样交给维护者
下面是演示记录，并非本网站的实测结果：“页面：演示商品页；入口：浏览器直接打开；竖屏、正常比例、键盘关闭：确认按钮可点击；打开客服小气泡：确认按钮右半被盖住；展开咨询后聚焦输入：发送按钮在键盘上方可见；转横屏后：面板关闭入口移出可见区。”这份记录直接形成两个待修项：气泡与业务按钮重叠，以及横屏关闭入口不可达；不应笼统归为网络慢。
如果只有从应用内打开才出现，可以补充“复制同一网址到系统浏览器后是否仍出现”。如果只有放大后出现，附上放大前后的同一目标，不要求用户提供账号口令。维护者收到记录后应按同样顺序重现；若演示环境未出现，保留设备环境差异继续核对，而不是回复“我这里正常”就结束。涉及轮班处理时，可把这个复现序列附在本站换班交接信息后，避免下一位同事重新问一遍。
修订后怎样算通过
先回到最初出问题的设备和打开方式，逐项重复原序列。通过标准不是截图更整齐，而是目标内容能读完，业务按钮和客服入口各自能点到，面板有可到达的关闭方式，键盘打开后能继续输入并找到发送动作，收起后没有留下阻断操作的空白。用演示消息提交一次，再确认不会重复发送。若有一项失败，在记录中保留失败状态，不用其他设备成功的结果替代。
最后再测另一种方向和放大阅读。维护者如调整了入口位置，还要检查页面顶部、底部、长文章和短表单，不让“商品页修好了”变成“帮助页又被挡住”。设计中保留文字缩放能力，给浮层和业务控件安排可共存的空间，才能减少访客反复关闭、刷新和重复进线。
参考说明
技术依据可查阅 MDN VisualViewport、MDN 视口概念与 W3C 重排理解文档。这些是网页布局规则，不代表客服产品具有某个未经核实的专属设置。