客户来电话时正在气头上：他给海外客户演示产品页，手机随手一转想看横版效果图，页面直接散了架——导航条重叠在标题上，产品参数表只剩半截。竖屏明明完美，横屏像另一个网站。对方在电话里就一句话：连转个屏都扛不住，还叫什么自适应？
为什么旋转是重灾区
横屏之后，宽度变大、高度变矮，等于设备瞬间换了一副身材。竖屏下排得好好的布局，到横屏可能撞上三个新问题：内容太高，一屏装不下，重要信息被挤到看不见的地方；原本单栏的排版突然有了大把宽度，图片和文字的比例变得怪异；固定在底部的按钮可能挡住正文，或者干脆被键盘顶出屏幕。做响应式网站设计，旋转不能只靠浏览器自动重排，关键节点要主动设计。被动等浏览器重排，等于把体验交给运气。
最容易出事的四类页面
- 带固定吸底栏的页面：横屏高度不够，吸底栏和正文挤在一起；
- 参数表和长表格：宽度突然富余，但高度骤减，横向滚动和纵向阅读容易打架；
- 弹窗和表单：横屏下弹窗高度超出可视区，提交按钮可能藏在键盘后面，客户根本点不到；
- 视频页：全屏切换回来时，有时布局不恢复，需要刷新才正常。
处理思路有两个方向：一是横竖屏各设一档样式，横屏主动改成双栏、压缩留白，把高度省下来；二是限制个别页面的旋转，比如表单填写时锁定竖屏，避免键盘遮挡。两条路不冲突，按页面性质选用。
测试安排得像用户一样
测试别按开发习惯来，按客户习惯来：打开首页转一下，浏览产品转一下，填到表单一半转一下，播放视频转一下，弹出菜单再转一下。每转一次，盯三件事：布局有没有错位、重要按钮还够不够得着、有没有内容被遮挡。全套做下来十分钟，能把九成的旋转问题提前揪出来。特别提醒安卓机，不同品牌对旋转的处理差异不小，手边有安卓就多转几台。苹果机型虽少，但用户占比在海外客户里不低，两边的账都要兼顾。
建议把旋转测试写进验收清单，五个页面各转一遍就够了，成本极低收益极高。已经上线的网站出现旋转问题，优先修表单和吸底栏这两处，它们直接卡询盘。比格网络做响应式网站设计时，横竖屏是双份的测试动作，我们宁可交付慢半天，也不给客户的客户留一次看笑话的机会。旋转这个动作，客户做起来只要一秒，你测试它也只要十分钟，这笔账怎么算都值。
