E4.19.2dialog fullscreen on narrow viewports设计研究
窄屏下对话框常需退化为全屏展示
别名: 窄屏对话框 · 全屏模态 · 对话框退化 · fullscreen dialog
概念解释
手机竖屏上，居中的小对话框两边露出的主界面已经没有可用宽度，框自己也放不下表单。退化为全屏（fullscreen dialog）是把这份对话铺满视口，当成一页来做，而不是继续维持桌面上那块浮着的卡片。主界面在全屏下完全离开，回来时再出现。这是结构换装，不是把同一张卡片等比放大。
机制
居中对话框靠「框与周围主界面的对比」声明自己是临时层。窄屏上周围只剩几像素的遮罩，对比消失，浮层看起来像一张被裁坏的页，可用宽度却仍按「卡片」在扣边距。表单字段、键盘弹出后，可用高度再被吃掉，卡片模型彻底不够。全屏承认视口就是这份对话的视口，边距按页面给，键盘弹出时对话内部滚动，而不是让整张卡片被顶出屏幕。代价是临时性减弱：少了周围那圈主界面，人更容易把它当成新的一页。因此全屏对话仍要有明确的关闭或返回，宣告「这不是导航栈里的下一站」。退化必须可逆：宽度回来时回到居中卡片，不要把手机上的全屏形态带到桌面。
怎么研究
在逐渐变窄的视口上完成同一份表单对话，比较始终居中卡片、到阈值全屏、始终全屏。测量字段是否可填、键盘是否盖住输入、关闭路径是否还在。自变量：视口宽、键盘是否弹出。因变量：完成率、误把对话当成独立页而找「下一页」的次数。阈值附近卡片完成率应下降、全屏完成率应上升。
边界
两行确认在手机上仍可能当卡片用，不必一律全屏；阈值按内容测。平板横屏常仍够居中。底部动作表是另一种窄屏结构，不要和全屏对话混用——动作表保留上缘那条主内容，全屏对话不保留。系统权限框的形态由操作系统定，应用内对话的退化管不到它。
怎么落地
- 当卡片的可用宽或高低于表单的最低需要，改为全屏页式对话，保留关闭或返回。
- 全屏时不要再画一层无意义的圆角卡片套在页里。
- 宽度恢复后回到居中卡片，状态接着用。
- 验证：在目标手机弹出键盘填完表单并离开。字段被挡或找不到离开，就还停在窄卡片上。