手机与平板:先看输入与显示
触屏设备的差异多数来自输入方式与屏幕宽度,页面本身的内容结构并不会因为设备改变。
- 密码输入时切换输入法,避免带出多余空格
- 横屏与竖屏之间切换后,页面会重新排列,属于正常表现
- 浏览器缩放被系统放大后,会出现右侧留白或内容溢出
- 长时间未清理缓存时,旧页面可能被优先调出
同一入口,在手机、平板与桌面上的排版、验证与提示并不相同。先确认手里的设备,再对照本页逐项核对。
下表把手机、平板与桌面三类设备放在同一张表上,按六个维度逐项列出差别。表格可横向滑动,首列在滑动时保持固定,方便左右比对。
| 对比维度 | 手机端 | 平板端 | 桌面端 |
|---|---|---|---|
| 入口打开方式 | 浏览器地址栏输入,或从收藏夹进入 | 浏览器标签页保留,二次打开更快 | 浏览器书签栏固定,输入板操作更顺手 |
| 页面显示比例 | 单列通栏,内容纵向排列 | 双列自适应,横竖屏切换会重排 | 信息并列展示,一屏可见更多栏目 |
| 登录验证环节 | 密码或短信验证,需留意输入法切换 | 以密码验证为主,键盘输入更稳 | 以密码验证为主,可配合密码管理器 |
| 加载表现 | 留意移动网络波动时需等待 | 家庭无线网络下较平稳 | 有线网络下响应更直接 |
| 常见提示 | 缓存过多、浏览器内核版本偏低 | 横竖屏切换后页面留白 | 浏览器扩展拦截或缩放比例异常 |
| 适合的处理方式 | 短时查看与快速核对 | 途中翻阅与分段处理 | 逐项核对与长时间对照 |
若同一台设备在不同浏览器里表现不同,先比较浏览器内核版本,再比较网络环境,这两项是差异来源中比较常见的部分。
把差异收敛成两组关注点:一组关于便携设备,一组关于大屏设备。核对时按顺序来,比反复刷新更省时间。
触屏设备的差异多数来自输入方式与屏幕宽度,页面本身的内容结构并不会因为设备改变。
大屏设备的差异多来自浏览器自身设置,处理顺序通常是版本、扩展、缩放,最后才考虑网络。
按下面的顺序走一遍,多数与终端相关的显示和验证问题都能定位到具体环节。
先在设置里看清系统版本号,再判断当前浏览器是否仍在支持范围内,版本过旧的浏览器往往无法正常加载页面样式。
地址缺少字符或多了空格时,页面会被导向其它位置。建议从收藏夹或已保存的书签进入,避免手输带来的偏差。
手机端可清理浏览器缓存,桌面端可尝试无痕窗口。若在无痕窗口正常,说明原窗口的扩展或缓存存在问题。
移动网络与无线网络的表现可能不同。切换后若恢复,多半与当前网络状态有关,可稍后重试或改用其它网络。
如果同一地址在另一台设备上可以正常打开,问题基本落在原设备的设置上,可回到第二步重新排查。
以下四组数字,概括了本页在排查时反复用到的观察点。
问题围绕设备与浏览器环境展开,可同时展开多项查看。