屏幕物理分辨率是指显示器实际拥有的像素点数量，通常表示为"宽度 × 高度"（如1920×1080）。它是硬件层面的固定参数，不会随窗口大小改变。本工具通过JavaScript的 screen.width 和 screen.height API直接读取您的屏幕物理分辨率。您可以在本页顶部"屏幕物理分辨率"卡片中查看您设备的实际分辨率。

设备像素比（Device Pixel Ratio，DPR）是指物理像素与CSS逻辑像素之间的比例关系。DPR=1表示1个CSS像素对应1个物理像素（普通桌面显示器）；DPR=2表示1个CSS像素对应2×2=4个物理像素（如MacBook Retina、iPhone 14等）；DPR=3表示1个CSS像素对应3×3=9个物理像素（如iPhone 14 Pro）。高DPR意味着更细腻的显示效果，常用于Retina屏幕和高端移动设备。本工具自动检测并显示您的设备DPR值。

CSS视口（通过window.innerWidth/innerHeight获取）是浏览器内容区域的实际可用CSS像素尺寸，它受窗口大小、缩放级别、滚动条等因素影响，是响应式设计的核心参考值。而屏幕物理分辨率是显示设备的固定硬件参数。例如，一台1920×1080的显示器上，浏览器窗口可能只有1200×700的CSS视口。理解两者的区别对于前端开发和响应式布局至关重要。

常见分辨率：1920×1080（Full HD，最主流）、2560×1440（2K/QHD）、3840×2160（4K/UHD）、1366×768（入门笔记本）、1280×720（HD）。移动端常见：390×844（iPhone 14）、393×852（iPhone 15 Pro）、360×800（Android中端）。
常见宽高比：16:9（最普遍）、16:10（MacBook）、4:3（旧款显示器）、21:9（超宽屏）、3:2（Surface系列）。本工具会自动识别并匹配您屏幕的宽高比。

本工具通过检测navigator.maxTouchPoints和触摸事件支持来判断设备是否具备触摸功能。颜色深度（screen.colorDepth）表示每个像素可以显示的颜色数量，通常为24位（约1670万色，真彩色）或30位（约10亿色，深彩色）。24位意味着红、绿、蓝每个通道各8位（2^8=256级），组合出256³≈1677万种颜色。

本工具结合screen.orientation API和视口宽高比较来检测屏幕方向。当window.innerWidth > window.innerHeight时为横屏，反之为竖屏。这对于移动端Web开发和响应式设计非常重要——横屏和竖屏下的布局策略通常不同，如图片展示、导航菜单样式、内容排列等都需要根据方向进行适配。