api 取屏幕宽度

如何使用API获取屏幕宽度

浏览器环境（JavaScript）

标准DOM方法

方法	说明	返回值	兼容性
window.innerWidth	获取窗口内渲染区域的宽度（包含滚动条）	数值（单位：像素）	IE9+ / 现代浏览器
document.documentElement.clientWidth	获取HTML根元素的客户端宽度（不含滚动条）	数值（单位：像素）	IE8+ / 现代浏览器
document.body.clientWidth	获取body元素的客户端宽度（含边框，不含滚动条）	数值（单位：像素）	IE8+ / 现代浏览器

// 示例代码
function getBrowserWidth() {
  return window.innerWidth || 
         document.documentElement.clientWidth || 
         document.body.clientWidth;
}
console.log(`当前屏幕宽度：${getBrowserWidth()}px`);

jQuery实现

$(document).ready(function(){
  var width = $(window).width(); // 包含滚动条
  console.log("jQuery获取宽度：" + width);
});

移动端环境

微信小程序

%ignore_pre_3%

React Native

import { Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
console.log(`设备宽度：${width}px`);

服务器端获取（间接方法）

注意：服务器无法直接获取客户端屏幕宽度,需通过以下方式：

1. 前端传递：通过Cookie/LocalStorage或API请求发送宽度
2. User-Agent分析：解析浏览器UA判断设备类型（不推荐精确需求）

// 前端示例（发送到服务器）
fetch('/api/screen', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ width: window.innerWidth })
});

---

常见问题与解答

Q1: 如何实时监听屏幕宽度变化？

A1：可以使用window.onresize事件监听器：

window.onresize = function(){
  console.log("新宽度：" + window.innerWidth);
};

注意：平板电脑横竖屏切换时会触发此事件,移动端部分浏览器可能不支持orientationchange事件。

Q2: 如何将屏幕宽度适配到不同设备？

A2：建议采用响应式布局方案：

1. 使用CSS媒体查询：

   @media (max-width: 768px) { 
     /* 平板/手机样式 */
   }

2. 动态计算比例：

   const baseWidth = 1920; // 设计基准宽度
   const ratio = getBrowserWidth() / baseWidth;
   document.body.style.zoom = ratio; // 简单缩放示例

3. 使用rem单位配合js动态设置html字体：

   const root = document.documentElement;
   root.style.fontSize = `${window.innerWidth / 10}px`;

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