溫馨提示×

如何檢測瀏覽器是否支持WebP格式并在PHP中做出響應(yīng)

PHP
小樊
82
2024-09-04 22:04:20
欄目: 編程語言

要檢測瀏覽器是否支持WebP格式，可以使用JavaScript來獲取瀏覽器的功能并將其發(fā)送到PHP

  1. 首先，創(chuàng)建一個HTML文件（例如：index.html），并添加以下內(nèi)容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>WebP Support Check</title>
</head>
<body>
   <script>
        function checkWebPSupport() {
            const tester = new Image();
            tester.onload = function () {
                if (tester.width === 2 && tester.height === 1) {
                    document.location.href = 'check_webp.php?support=true';
                } else {
                    document.location.href = 'check_webp.php?support=false';
                }
            };
            tester.onerror = function () {
                document.location.href = 'check_webp.php?support=false';
            };
            tester.src = 'data:image/webp;base64,UklGRiIAAABXRUSOQVQ4lAAACAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA';
        }
        checkWebPSupport();
    </script>
</body>
</html>

這段代碼會嘗試加載一個WebP圖像。如果成功，說明瀏覽器支持WebP格式，然后將用戶重定向到check_webp.php文件并附加support=true參數(shù)。如果失敗，將用戶重定向到check_webp.php文件并附加support=false參數(shù)。

  1. 接下來，創(chuàng)建一個PHP文件（例如：check_webp.php），并添加以下內(nèi)容：
<?php
$webp_support = isset($_GET['support']) && $_GET['support'] == 'true';

if ($webp_support) {
    echo "瀏覽器支持WebP格式";
} else {
    echo "瀏覽器不支持WebP格式";
}
?>

這段PHP代碼會檢查URL參數(shù)support的值，如果為true，則表示瀏覽器支持WebP格式，否則表示不支持。

現(xiàn)在，當用戶訪問index.html時，頁面會自動檢測瀏覽器是否支持WebP格式，并顯示相應(yīng)的結(jié)果。

0 踩