移动端外贸网站横竖屏适配

横竖屏使用场景

移动端用户会根据使用场景切换横竖屏：竖屏（Portrait）是手机的默认和最常见方向，适合浏览列表、阅读文字、单手操作；横屏（Landscape）在看视频、浏览产品图片、使用键盘输入时更常见。平板用户更常使用横屏。外贸网站应确保在两种方向下都有良好的体验。

媒体查询

使用orientation媒体查询检测屏幕方向：@media (orientation: portrait) { /* 竖屏样式 */ } @media (orientation: landscape) { /* 横屏样式 */ }。更精确的方法是使用min-width和max-width结合判断，因为横屏时宽度大于高度。注意：在桌面端浏览器调整窗口大小时也会触发这些媒体查询。

横屏布局优化

横屏模式下的布局优化：利用更宽的宽度显示更多内容（如从单列变为双列）；产品图片在横屏时可以更大显示；导航菜单可以展开显示（而非折叠为汉堡菜单）；视频播放自动切换到横屏全屏模式；表单字段可以并排显示（减少滚动）；轮播图可以一次显示更多张缩略图。

图片和视频

横竖屏的图片和视频适配：使用object-fit: cover确保图片在不同比例下正确填充；视频播放器支持横竖屏切换（全屏时自动横屏）；产品图片支持横屏时放大查看细节；横幅图片在不同方向显示不同版本（使用元素或CSS background-position调整）。

禁止旋转

某些场景下可能需要锁定屏幕方向：产品配置器或设计工具可能更适合横屏；阅读长文章时锁定竖屏体验更好。可以使用Screen Orientation API锁定方向：screen.orientation.lock('portrait')，但需要考虑浏览器兼容性（目前支持有限）。更可靠的方法是在横屏时显示提示，引导用户切换到竖屏。

测试方法

横竖屏适配的测试方法：在真实设备上手动旋转测试；使用Chrome DevTools的设备模拟切换方向；测试不同宽高比的设备（如iPhone的19.5:9和iPad的4:3）；确保横竖屏切换时状态不丢失（如表单输入、滚动位置）；测试横屏时所有交互元素仍然可触及（特别是屏幕边缘的按钮）。