React JS如何根据屏幕尺寸控制组件加载：移动端不加载视频

方案1：服务器端根据设备类型控制渲染（最彻底） #

直接在服务器层面判断请求的设备类型，仅向桌面端用户输出视频组件的HTML代码，移动端用户的页面中完全不包含该组件，从根源避免资源加载和意外播放问题。

以PHP为例，通过User-Agent检测设备：

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$isMobile = preg_match('/(android|iphone|ipad|ipod|blackberry|windows phone)/i', $userAgent);

if (!$isMobile) {
    // 仅桌面端输出视频组件
    echo '<video src="your-video.mp4" controls></video>';
}
?>

方案2：前端JavaScript动态加载视频组件 #

通过JS检测设备或视口尺寸，仅在满足桌面端条件时，动态创建并插入视频元素到DOM中，移动端不会执行加载逻辑。

基于视口宽度的检测 #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 定义桌面端最小宽度，可根据需求调整
    const desktopMinWidth = 1024;
    
    if (window.innerWidth >= desktopMinWidth) {
        // 创建视频元素
        const video = document.createElement('video');
        video.src = 'your-video.mp4';
        video.controls = true;
        // 将视频插入到目标容器中
        document.getElementById('video-container').appendChild(video);
    }
});

// 可选：监听窗口 resize 事件，适配窗口缩放场景
window.addEventListener('resize', function() {
    const desktopMinWidth = 1024;
    const videoContainer = document.getElementById('video-container');
    const existingVideo = videoContainer.querySelector('video');
    
    if (window.innerWidth >= desktopMinWidth && !existingVideo) {
        const video = document.createElement('video');
        video.src = 'your-video.mp4';
        video.controls = true;
        videoContainer.appendChild(video);
    } else if (window.innerWidth < desktopMinWidth && existingVideo) {
        // 窗口缩小到移动端尺寸时，移除视频元素并释放资源
        existingVideo.remove();
    }
});

基于设备类型的检测 #

document.addEventListener('DOMContentLoaded', function() {
    // 检测是否为移动设备
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    if (!isMobile) {
        const video = document.createElement('video');
        video.src = 'your-video.mp4';
        video.controls = true;
        document.getElementById('video-container').appendChild(video);
    }
});

关键注意点 #

• 绝对避免使用display:none或visibility:hidden这类CSS属性，它们仅隐藏元素视觉表现，无法阻止浏览器加载视频资源，更无法避免Safari下的自动播放问题。
• 动态加载时，务必保证视频元素仅在满足桌面端条件时才被创建并设置src属性，未满足条件时DOM中完全不存在该元素，彻底杜绝不必要的资源加载和意外播放行为。

内容的提问来源于stack exchange，提问作者prabhdeep singh