移动端网页实现设备横屏时自动显示GIF的方案咨询

嘿，这个需求其实很好实现，我给你两种实用方案，你可以根据自己的项目场景来选：

如果你的需求只是“横屏时显示GIF，竖屏时隐藏”，纯CSS就能搞定，不需要写JS，非常清爽。

首先在HTML里把GIF元素放好，默认设置成隐藏：

<!-- 你的页面其他内容 -->
<img id="landscape-gif" src="你的GIF地址.gif" alt="横屏提示" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 9999;">

然后用CSS的媒体查询检测屏幕方向，当设备处于横屏时显示这张GIF：

/* 当设备为横屏时显示GIF */
@media (orientation: landscape) {
    #landscape-gif {
        display: block !important;
    }
}

⚠️ 提醒你一下：一定要在页面头部加上正确的viewport设置，否则媒体查询可能会失效：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果需要在屏幕切换方向时做一些额外操作（比如添加过渡动画、记录状态等），用JS监听事件会更灵活。

方法一：监听orientationchange事件 #

这个事件是专门为屏幕方向变化设计的，在移动端设备上支持很好：

const landscapeGif = document.getElementById('landscape-gif');

// 页面加载时先检查一次当前方向
checkOrientation();

// 监听方向变化事件
window.addEventListener('orientationchange', checkOrientation);

function checkOrientation() {
    // 判断当前是否为横屏
    const isLandscape = window.innerWidth > window.innerHeight || window.orientation === 90 || window.orientation === -90;
    
    landscapeGif.style.display = isLandscape ? 'block' : 'none';
}

方法二：监听resize事件 #

如果有些设备不支持orientationchange（比如部分老旧平板），用resize事件会更通用，每次窗口大小变化时自动检查方向：

const landscapeGif = document.getElementById('landscape-gif');

// 初始检查方向
checkOrientation();

// 监听窗口尺寸变化
window.addEventListener('resize', checkOrientation);

function checkOrientation() {
    const isLandscape = window.innerWidth > window.innerHeight;
    landscapeGif.style.display = isLandscape ? 'block' : 'none';
}

额外注意事项 #

• 如果需要区分手机和平板，可以在媒体查询里加上min-width条件，比如@media (orientation: landscape) and (min-width: 768px)，这样只有平板横屏时才显示GIF
• 为了优化页面加载性能，可以给GIF加上懒加载，比如用loading="lazy"属性，或者在检测到横屏时才动态设置GIF的src属性
• 如果GIF是作为遮罩层覆盖整个页面，记得设置好z-index，确保它在所有页面内容的上方

内容的提问来源于stack exchange，提问作者Dovydas Bereiša