手机竖屏360 – 430 px 可用宽度
登录区域收成单栏，账号、密码与验证码纵向堆叠，输入框高度保持在手指可点范围，软键盘弹出时页面整体上推。
- 输入框触控高度不低于 44px
- 验证码与登录按钮各自独立成行
- 键盘弹出后按钮不被遮挡
设备矩阵
四类设备上的登录区域排布
从口袋里的手机到桌面的宽屏显示器，可用宽度跨了将近十倍。登录区域会按宽度自动换档，下面四种是日常最常见的形态。
平板平板模式7 – 11 英寸，横竖屏切换
竖屏时与手机接近，横屏后宽度足够放下两栏，表单居中并留出提示区。旋转屏幕只重排布局，已填写的内容不会丢。
- 横屏两栏、竖屏单栏自动切换
- 手指与触控笔点击效果一致
- 分屏模式下宽度自动收窄
笔记本窗口1280 – 1536 px 常见宽度
表单在页面中居中显示，宽度锁定不易拉散，右侧留出提示与帮助入口。浏览器缩放调到 125% 时表单宽度会同步收缩。
- 表单宽度设上限，不随窗口拉长
- 100% – 125% 缩放兼容
- 外接显示器下排版不拉伸
桌面大屏1600 px 以上宽屏环境
宽度继续增加时内容区不再无限拉伸，登录区域保持固定上限并居中，窗口拖成半屏宽时会自动降为单栏。
- 内容区最大宽度锁定居中
- 多窗口并排不挤压排版
- 高像素密度下文字不模糊
跨端核对
常见问题
换设备前值得先确认的八件事
这些都是日常反馈里出现频率较高的位置。逐条比对之后，多数显示问题都能判断出是页面还是设备设置的原因。
-
01
入口
登录入口地址保持一致
四类设备访问的是同一地址，页面按屏幕宽度自行选择排布，不需要再记住单独的移动版网址。
-
02
触控
输入框的触控高度
手机与平板上输入框高度保持在 44px 以上，相邻控件之间留出间距，点选时不至于误触到旁边的按钮。
-
03
手机
软键盘弹出后的可视区域
手机端唤起键盘时页面自动上推，当前输入框与登录按钮都落在可视区域内，填完即可直接提交。
-
04
平板
横竖屏切换不丢内容
平板旋转屏幕后，已填写的账号信息保留，页面只重新排列布局，不会整屏刷新或清空输入。
-
05
缩放
浏览器缩放的容错范围
桌面端把缩放调到 125% 或 150% 时，表单宽度同步收缩，页面不出现横向滚动条，按钮也不会被裁掉。
-
06
窗口
多窗口并排显示
把浏览器窗口拖到半屏宽度，登录区域切换为单栏，验证码与按钮仍在同一屏内，不必来回滚动。
-
07
屏幕
高分辨率屏幕的清晰度
设备像素比较高的屏幕上，图标与文字边缘保持清晰，不会因为缩放不足而出现虚化或拉伸。
-
08
状态
登录状态按设备独立保存
同一账号在不同设备上的登录状态各自维护，退出其中一台设备不会影响其它设备上已完成的登录。
核对顺序
发现显示异常时的四步确认
按照下面的顺序走一遍，通常能在几分钟内定位到是设备设置、浏览器版本还是页面加载的问题。
01
记录设备与浏览器
先写清设备类型、系统版本和浏览器名称，不同设备的差异说明是对着具体环境写的，比口头描述更省事。
02
调整窗口或方向
在桌面端拖动窗口宽度，在平板旋转屏幕，观察登录区域是否随宽度重新排列，判断响应式是否生效。
03
核对输入与按钮
检查输入框高度、验证码位置与按钮是否完整显示，确认触控环境下没有遮挡、错位或误触。
04
记录异常现象
若某一项与说明仍然不符，把设备、浏览器和具体表现出来一起记录，后续核对会快很多。
注意事项
浏览器自带的缩放、系统级大字体模式与内嵌浏览器的渲染策略都会改变页面宽度。同一台设备上换个浏览器打开，结果可能完全不同，比较之前先确认两边环境是否一致。
常见差异
键鼠环境与触屏环境的操作对照
同样的几步操作，在键盘鼠标和手指触控下的细节并不相同，下表把常见差异并排列出。
| 操作项 | 键盘鼠标环境 | 手指触控环境 |
|---|---|---|
| 输入账号 | 直接用物理键盘输入，输入法候选框显示在光标附近。 | 点击后唤起系统软键盘，页面会随键盘高度自动上推。 |
| 填写验证码 | 鼠标点选输入框后逐位输入，可随时回改。 | 点击唤起数字键盘，输入完成后键盘自动收起，按钮回到原位。 |
| 切换账号 | 退出当前账号后重新输入，历史记录不影响填写。 | 建议先完整退出，避免系统自动填充上一次使用的账号。 |
| 保持登录状态 | 由浏览器凭证管理保存，清理浏览器数据后会失效。 | 系统浏览器与内嵌浏览器保存策略不同，需要分别确认。 |
| 复制与粘贴 | 右键粘贴即可，注意公共电脑上的剪贴板残留。 | 长按唤起粘贴菜单，使用完毕后建议清空剪贴板。 |
| 窗口与方向变化 | 拖动窗口宽度会触发布局换档，内容不会丢失。 | 旋转屏幕后已填内容保留，只重新排列显示位置。 |
多端疑问
关于跨设备显示的常见问题
下面这些问题来自实际使用中反馈较多的场景，答案按设备差异逐条说明。
手机端在唤起软键盘后会自动上推页面，把当前输入框滚动到可视区域中间。若仍然被遮挡，可以先收起键盘，检查浏览器是否开启了强制缩放或系统大字体模式，再重新点击输入框。部分内嵌浏览器不会触发自动上推，把手机横过来或改用系统自带浏览器即可正常填写。
平板在横竖屏之间的可用宽度差距较大。竖屏时宽度与手机接近，登录区域采用单栏纵向排布；横屏时宽度足够放下两栏，表单居中并留出提示区。旋转屏幕后已填写的账号信息会保留，只是重新排列布局，不会重新加载页面。
窗口宽度缩小时，登录区域会从两栏切换为单栏，按钮顺次下移，需要向下滚动才能看到，这是正常的响应式表现。如果页面底部出现了横向滚动条，说明浏览器缩放比例偏大，调回 100% 或者把窗口最大化即可恢复正常排布。
不同设备上的登录状态各自独立保存，手机端登录不会顶掉电脑端的会话。需要留意的是同一台设备上的不同浏览器互不共享状态，退出其中一台设备也不影响其它设备已经完成的登录。
高分辨率屏幕在系统缩放不足时，页面按物理像素渲染会让文字显得偏小。可以把系统缩放调到 125% 或 150%，或者在浏览器里单独调整页面缩放比例。登录区域的宽度上限是固定的，放大之后不会出现排版拉伸或元素错位。