屏幕尺寸测试器

预设设备尺寸库（iPhone/iPad/Android/桌面等40+设备）、自定义尺寸输入和实时预览、设备像素比DPI调整（1x/2x/3x）、屏幕旋转方向切换（横向/纵向）、iframe嵌入式预览、响应式断点测试和可视化标记、设备信息显示（分辨率/像素密度/屏幕类型）

设备分类

预设设备

自定义配置

宽度 (px)

高度 (px)

设备像素比 (DPR)

内容源

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>屏幕尺寸测试</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      min-height: 100vh;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    h1 { font-size: 2.5rem; margin-bottom: 1rem; }
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin: 20px 0;
    }
    .info-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      padding: 15px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .info-card h3 { margin-bottom: 8px; font-size: 0.9rem; }
    .breakpoint-indicator {
      position: fixed;
      top: 10px;
      right: 10px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-family: monospace;
      z-index: 1000;
    }
    @media (max-width: 640px) {
      h1 { font-size: 1.8rem; }
      .info-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      body { padding: 15px; }
    }
  </style>
</head>
<body>
  <div class="breakpoint-indicator" id="breakpoint"></div>
  <div class="container">
    <h1>🖥️ 屏幕尺寸测试</h1>
    <div class="info-grid">
      <div class="info-card">
        <h3>📏 屏幕尺寸</h3>
        <div id="screen-size"></div>
      </div>
      <div class="info-card">
        <h3>🎯 视口尺寸</h3>
        <div id="viewport-size"></div>
      </div>
      <div class="info-card">
        <h3>📱 设备像素比</h3>
        <div id="dpr"></div>
      </div>
      <div class="info-card">
        <h3>📊 响应式断点</h3>
        <div id="breakpoint-info"></div>
      </div>
    </div>
  </div>

document.getElementById('screen-size').textContent = screenSize;
      document.getElementById('viewport-size').textContent = viewportSize;
      document.getElementById('dpr').textContent = dpr + 'x';

// 确定当前断点
      let breakpoint = 'XS';
      const width = window.innerWidth;
      if (width >= 1536) breakpoint = '2XL';
      else if (width >= 1280) breakpoint = 'XL';
      else if (width >= 1024) breakpoint = 'LG';
      else if (width >= 768) breakpoint = 'MD';
      else if (width >= 640) breakpoint = 'SM';

document.getElementById('breakpoint').textContent = breakpoint;
      document.getElementById('breakpoint-info').textContent = breakpoint + ' (' + width + 'px+)';
    }

updateInfo();
    window.addEventListener('resize', updateInfo);
  </script>
</body>
</html>

iPhone - iPhone SE (3rd)

375 × 667 px @ 2x

设备信息

屏幕尺寸:

375 × 667 px

物理像素:

750 × 1334 px

像素密度:

2x DPR

当前断点:

响应式断点

0px+

640px+

768px+

1024px+

1280px+

2XL

1536px+