选择布局策略
响应式游戏可以重新排布游戏区域、在固定的虚拟区域周围保留留白，或清楚提示玩家旋转设备。根据玩法选择：宽车道的跑酷游戏可能需要横向空间，而纵向堆叠游戏在竖屏下也许依然清晰。不要拉伸整个场景来适配，因为物体比例会变，命中区域也可能不再准确。
使用 CSS 媒体查询处理与视口方向相关的布局。只有脚本需要知道方向时才监听 ScreenOrientation 的变化；不要依赖已弃用的 window.orientationchange 事件。锁定屏幕方向应有明确需求和备用方案，不能用来绕过未经测试的布局。
重新计算坐标映射
旋转后，测量当前游戏容器并重新计算显示变换。在接受下一次操作前，更新指针坐标到游戏世界坐标的转换。如果拖动尚未结束，可以按新的变换继续拖动，也可以妥善取消；把旧指针坐标与新的画布尺寸混用，可能会让物体突然穿过场景。
在一局开始前、拖动过程中以及菜单打开时测试旋转。确认尺寸变化不会开启新游戏局，且控件仍可操作。MDN 介绍了 ScreenOrientation 的变化事件和锁定功能；按需使用，并检查设备是否允许锁定。
关于浏览器游戏屏幕方向变化的常见问题
浏览器游戏应该强制横屏吗？
只有在游戏确有充分理由且提供了清晰备用方案时才应强制。响应式布局或提示玩家旋转设备，可能比锁定屏幕更合适。
屏幕旋转一定会触发尺寸变化事件吗？
不同浏览器和设备对视口及方向变化的处理可能不同。请测试实现所依赖的事件，并在变化后重新测量实际的游戏容器。
延伸阅读
发现信息过时了？ 报告需要更正的内容