您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

PHP 獲取客戶端螢幕解析度方案：JavaScript 采集 + AJAX/cookie 傳遞完整實作

編輯：PHP 相關知識

PHP 獲取客戶端螢幕解析度方案：JavaScript 采集 + AJAX/cookie 傳遞完整實作

PHP 執行於伺服器端，無法直接存取客戶端瀏覽器環境資訊（如螢幕解析度、視窗大小、裝置像素比）。標準解法是：前端 JavaScript 采集 → 非同步傳遞給後端 PHP。本文提供完整前後端程式碼，涵蓋 screen 物件屬性解析、AJAX POST 傳輸、PHP 接收儲存，並說明應用場景與注意事項。

一、核心原理圖解

┌─────────────┐     screen.width/height      ┌─────────────┐
│  客戶端瀏覽器  │ ─────────────────────────▶ │  JavaScript  │
└─────────────┘                              └──────┬──────┘
                                                     │
                                          AJAX POST / cookie
                                                     ▼
┌─────────────┐     $_POST['w'],$_POST['h']      ┌─────────────┐
│  PHP 後端    │ ◀──────────────────────────── │  接收處理    │
└─────────────┘                              └─────────────┘

二、JavaScript 采集關鍵屬性

屬性	含義	典型值範例
`screen.width`	螢幕水平解析度（像素）	1920
`screen.height`	螢幕垂直解析度（像素）	1080
`screen.availWidth`	可用工作區寬度（扣除作業列）	1920
`screen.availHeight`	可用工作區高度	1040
`window.devicePixelRatio`	裝置像素比（Retina 等高解析度螢幕）	2.0
`window.innerWidth`	瀏覽器視窗可視區寬度	1600
`window.innerHeight`	瀏覽器視窗可視區高度	900

三、完整前後端實作碼

1. 前端頁面（含 jQuery AJAX 傳送）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>螢幕解析度采集示例</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <h1>頁面內容區</h1>
    <p>您的螢幕資訊正在後台發送...</p>

    <script>
    $(function() {
        // 采集螢幕資訊
        var data = {
            screen_width: window.screen.width,
            screen_height: window.screen.height,
            avail_width: window.screen.availWidth,
            avail_height: window.screen.availHeight,
            device_pixel_ratio: window.devicePixelRatio || 1,
            viewport_width: window.innerWidth,
            viewport_height: window.innerHeight,
            user_agent: navigator.userAgent,
            url: window.location.href,
            timestamp: Date.now()
        };

        // AJAX 發送至 PHP 後端
        $.ajax({
            url: '/api/screen-collect.php', // 你的 PHP 接收介面
            type: 'POST',
            data: data,
            dataType: 'json',
            success: function(resp) {
                console.log('螢幕資訊提交成功:', resp);
            },
            error: function(xhr) {
                console.warn('提交失敗:', xhr.status);
            }
        });
    });
    </script>
</body>
</html>

2. PHP 接收介面（screen-collect.php）

<?php
// api/screen-collect.php
header('Content-Type: application/json; charset=utf-8');

// 僅允許 POST
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    echo json_encode(['code'=>405, 'msg'=>'Method Not Allowed']);
    exit;
}

// 接收並過濾
$screenData = [
    'screen_width'      => filter_input(INPUT_POST, 'screen_width', FILTER_VALIDATE_INT),
    'screen_height'     => filter_input(INPUT_POST, 'screen_height', FILTER_VALIDATE_INT),
    'avail_width'       => filter_input(INPUT_POST, 'avail_width', FILTER_VALIDATE_INT),
    'avail_height'      => filter_input(INPUT_POST, 'avail_height', FILTER_VALIDATE_INT),
    'device_pixel_ratio'=> filter_input(INPUT_POST, 'device_pixel_ratio', FILTER_VALIDATE_FLOAT),
    'viewport_width'    => filter_input(INPUT_POST, 'viewport_width', FILTER_VALIDATE_INT),
    'viewport_height'   => filter_input(INPUT_POST, 'viewport_height', FILTER_VALIDATE_INT),
    'user_agent'        => filter_input(INPUT_POST, 'user_agent', FILTER_SANITIZE_STRING),
    'url'               => filter_input(INPUT_POST, 'url', FILTER_VALIDATE_URL),
    'client_ip'         => $_SERVER['REMOTE_ADDR'] ?? 'unknown',
    'received_at'       => date('Y-m-d H:i:s'),
];

// 簡單驗證
if (empty($screenData['screen_width']) || empty($screenData['screen_height'])) {
    echo json_encode(['code'=>400, 'msg'=>'缺少必要螢幕參數']);
    exit;
}

// 業務處理：儲存資料庫、寫入日誌、更新 Session 等
// 示例：寫入 JSON Lines 日誌
$logFile = __DIR__ . '/../logs/screen_' . date('Y-m-d') . '.log';
$logLine = json_encode($screenData, JSON_UNESCAPED_UNICODE) . "\n";
file_put_contents($logFile, $logLine, FILE_APPEND | LOCK_EX);

// 回應
echo json_encode(['code'=>200, 'msg'=>'ok', 'data'=>$screenData]);
?>

四、替代方案：Cookie 傳遞（適用於需在同域名下一步請求即用）

<!-- 前端設定 Cookie -->
<script>
document.cookie = "screen_width=" + screen.width + "; path=/; max-age=86400";
document.cookie = "screen_height=" + screen.height + "; path=/; max-age=86400";
// 下一頁 PHP 即可直接讀取 $_COOKIE['screen_width']
</script>

比較： AJAX 適合統計分析、非阻塞；Cookie 適合下一請求即需使用（如響應式圖片尺寸決定），但會增加 HTTP 請求體積。