api 获取屏幕大小

如何通过API获取屏幕大小

浏览器环境（JavaScript）

在网页开发中,可以通过 window.screen 对象或 window.innerWidth 等属性获取屏幕尺寸。

示例代码

// 获取屏幕宽高
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
// 获取窗口宽高（可能受缩放影响）
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// 获取设备像素比（如2代表Retina屏）
const dpr = window.devicePixelRatio;
console.log(`屏幕尺寸: ${screenWidth}x${screenHeight}`);
console.log(`窗口尺寸: ${windowWidth}x${windowHeight}`);
console.log(`设备像素比: ${dpr}`);

移动端（原生应用）

Android（Java/Kotlin）

通过 DisplayMetrics 获取屏幕信息：

DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels; // 物理像素宽度
int height = displayMetrics.heightPixels; // 物理像素高度
float density = displayMetrics.density; // 密度（dp/px比例）

iOS（Swift/Objective-C）

通过 UIScreen 获取主屏幕信息：

let bounds = UIScreen.main.bounds
let width = bounds.size.width // 逻辑像素宽度
let height = bounds.size.height // 逻辑像素高度
let scale = UIScreen.main.scale // 缩放比例（类似DPR）

跨平台框架（如 React Native）

示例代码（React Native）

import { Dimensions, PixelRatio } from 'react-native';
const { width, height } = Dimensions.get('window'); // 逻辑像素尺寸
const dpr = PixelRatio.get(); // 设备像素比
console.log(`屏幕尺寸: ${width}x${height}`);
console.log(`设备像素比: ${dpr}`);

屏幕尺寸对比表

相关问题与解答

问题1：如何区分“物理像素”和“逻辑像素”？

解答：

• 物理像素：屏幕实际的硬件像素数量（如1920×1080）。
• 逻辑像素：开发者使用的抽象单位，通常与设备像素比（DPR）相关，在DPR=2的屏幕上，1逻辑像素=2物理像素。
• 应用场景：设计稿一般按逻辑像素（如750×1334）标注，实际开发需乘以DPR转换为物理像素。

问题2：如何监听屏幕尺寸变化（如折叠屏或旋转）？

解答：

• Web：监听 resize 事件：

  window.addEventListener('resize', () => {
    console.log(`新尺寸: ${window.innerWidth}x${window.innerHeight}`);
  });

• React Native：使用 Dimensions.addEventListener：

  const { width, height } = Dimensions.get('window');
  Dimensions.addEventListener('change', ({ window }) => {
    console.log(`新尺寸: ${window.width}x${window.height}`);
  });

以上就是关于“api 获取屏幕大小”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!