WordPress站点如何为Safari与其他浏览器设置不同内容？

这个方案完全可行，是解决浏览器兼容问题的常规思路，既能绕过Safari的视频蒙版播放按钮问题，又能保证其他浏览器的正常体验。以下是几种具体实现方式：

一、纯CSS检测实现 #

利用Safari独有的CSS特性做特征检测，无需JS或后端逻辑：

CSS代码 #

/* 默认状态：显示视频，隐藏图片 */
.content-fallback .video-wrap {
    display: block;
}
.content-fallback .image-wrap {
    display: none;
}

/* 仅针对Safari：显示图片，隐藏视频 */
@supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .content-fallback .video-wrap {
        display: none;
    }
    .content-fallback .image-wrap {
        display: block;
    }
}

页面结构 #

<div class="content-fallback">
    <!-- 视频容器（带蒙版） -->
    <div class="video-wrap">
        <video muted loop autoplay playsinline>
            <source src="your-video-file.mp4" type="video/mp4">
        </video>
        <div class="mask-element"></div> <!-- 你的蒙版元素 -->
    </div>
    <!-- 图片容器（带同款蒙版） -->
    <div class="image-wrap">
        <img src="your-fallback-image.jpg" alt="视频替代图">
        <div class="mask-element"></div> <!-- 保持和视频蒙版一致的样式 -->
    </div>
</div>

二、JavaScript检测实现 #

通过用户代理字符串识别Safari，动态切换内容显示状态：

JS代码 #

// 精准检测Safari（排除Chrome，因为Chrome UA包含Safari字段）
function checkIsSafari() {
    const ua = navigator.userAgent;
    return /safari/i.test(ua) && !/chrome|android/i.test(ua);
}

// 页面加载后切换内容
window.addEventListener('load', () => {
    if (checkIsSafari()) {
        document.querySelector('.content-fallback').classList.add('safari-view');
    }
});

对应CSS #

.content-fallback .video-wrap { display: block; }
.content-fallback .image-wrap { display: none; }

.content-fallback.safari-view .video-wrap { display: none; }
.content-fallback.safari-view .image-wrap { display: block; }

三、WordPress后端PHP实现 #

直接在主题模板中通过用户代理判断，输出对应内容：

<?php
$user_agent = $_SERVER['HTTP_USER_AGENT'];
// 匹配Safari且排除Chrome
if (preg_match('/safari/i', $user_agent) && !preg_match('/chrome|android/i', $user_agent)) {
    // Safari环境：输出图片+蒙版
    ?>
    <div class="image-wrap">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/video-fallback.jpg" alt="背景图">
        <div class="mask-element"></div>
    </div>
    <?php
} else {
    // 其他浏览器：输出视频+蒙版
    ?>
    <div class="video-wrap">
        <video muted loop autoplay playsinline>
            <source src="<?php echo get_template_directory_uri(); ?>/assets/video/background.mp4" type="video/mp4">
        </video>
        <div class="mask-element"></div>
    </div>
    <?php
}
?>

注意事项 #

• 确保图片和视频的蒙版样式完全一致，避免视觉差异；
• 视频添加playsinline属性，防止iOS Safari自动进入全屏模式；
• 用户代理检测可能存在小概率误判，优先推荐CSS特征检测方案。

内容的提问来源于stack exchange，提问作者Momin Shemoil