实现 屏幕尺寸 工具

分类：general ｜ 标签：屏幕、PPI、尺寸 由分辨率算 PPI 与对角线

2.1 功能说明

由分辨率算 PPI 与对角线

2.1.1 使用指南

功能说明

由分辨率与物理对角线（英寸）计算 PPI（每英寸像素），或反推对角线。

使用场景

显示器/手机屏幕清晰度评估。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• run()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const w = ref(1920), h = ref(1080), diag = ref(23.8)
const error = ref(''), res = ref(null)

function run() {
  error.value = res.value = null
  const W = Number(w.value), H = Number(h.value), D = Number(diag.value)
  if (![W, H, D].every(Number.isFinite) || W <= 0 || H <= 0 || D <= 0) { error.value = '请填写有效正数'; return }
  const diagPx = Math.sqrt(W * W + H * H)
  res.value = {
    ppi: (diagPx / D).toFixed(1),
    diagPx: diagPx.toFixed(0),
    total: ((W * H) / 1e6).toFixed(2)
  }
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/screen-size