如何判断显示器为宽屏或标准屏？含PHP、CSS、JavaScript实现方案

嘿，刚好对这个问题熟得很！我来一步步给你讲清楚怎么判断屏幕类型，还有怎么用代码实现～

其实核心就是看屏幕宽高比：

• 标准（方形）屏幕的常见比例是 4:3（比值≈1.333）或 5:4（比值≈1.25），比如老款的CRT显示器或者一些小尺寸办公屏
• 宽屏的比例则是 16:9（比值≈1.777）、16:10（比值≈1.6）这类宽高比大于1.333的，现在的主流显示器基本都是这个类型

具体操作：

• 最简单的方式：看系统显示的分辨率。Windows右键桌面→「显示设置」，Mac去「系统设置→显示器」，看分辨率的宽/高数值，算一下比值就知道了（比如1920×1080，1920÷1080≈1.777，就是宽屏；1024×768的话，1024÷768=1.333，是标准屏）
• 较真的话：拿尺子量屏幕可视区域的宽度和高度（别算边框！），直接算比值就行

1. JavaScript 前端实时判断（最推荐） #

JS能直接获取客户端的屏幕/浏览器窗口信息，是最靠谱的实时判断方式：

function checkScreenType() {
    // 可选：用screen.width/screen.height获取物理屏幕比例，或者用window.innerWidth/window.innerHeight取当前浏览器窗口比例
    const aspectRatio = screen.width / screen.height;
    // 4:3的比值是1.333，大于这个就判定为宽屏
    if (aspectRatio > 1.333) {
        return "宽屏显示器";
    } else {
        return "标准（方形）屏幕";
    }
}

// 调用示例
console.log(checkScreenType());
// 也可以把结果显示在页面上
document.getElementById('screen-info').textContent = `当前屏幕类型：${checkScreenType()}`;

小提示：如果要区分更细分的比例（比如16:9和21:9的超宽屏），可以调整判断阈值，比如用1.777来判断16:9，2.333判断21:9。

2. CSS 媒体查询适配（样式层面） #

CSS没法直接“输出判断结果”，但可以根据屏幕比例自动应用不同样式，间接实现适配甚至提示：

/* 给页面加个显示屏幕类型的元素 */
.screen-type {
    padding: 10px;
    background: #f5f5f5;
}

/* 标准屏（4:3及更窄）的样式 */
@media (max-aspect-ratio: 4/3) {
    .page-container {
        /* 标准屏专属布局：比如两列变单列 */
        grid-template-columns: 1fr;
    }
    .screen-type::after {
        content: "当前是标准（方形）屏幕";
        color: #666;
    }
}

/* 宽屏（大于4:3）的样式 */
@media (min-aspect-ratio: 4.001/3) {
    .page-container {
        /* 宽屏专属布局：比如三列展示 */
        grid-template-columns: 1fr 1fr 1fr;
    }
    .screen-type::after {
        content: "当前是宽屏显示器";
        color: #222;
    }
}

这种方式适合做响应式布局，不用写JS就能适配不同屏幕。

3. PHP 后端判断（有局限性） #

PHP是后端语言，没法直接获取客户端的物理屏幕信息，只能通过两种间接方式：

方式一：前端传参给后端（推荐） #

让JS把屏幕比例传给PHP，比如用AJAX：

// 前端JS
const aspectRatio = screen.width / screen.height;
fetch('/screen-check.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ aspectRatio })
})
.then(res => res.json())
.then(data => {
    console.log(data.screenType);
});

// 后端screen-check.php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $requestData = json_decode(file_get_contents('php://input'), true);
    $aspectRatio = $requestData['aspectRatio'] ?? 0;
    
    $screenType = $aspectRatio > 1.333 ? '宽屏显示器' : '标准（方形）屏幕';
    echo json_encode(['screenType' => $screenType]);
}
?>

方式二：通过User-Agent猜测（不推荐） #

有些设备的User-Agent会包含屏幕信息，但这种方式极不准确，很多设备不会标注，所以不建议用。

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