如何使用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`);
服务器端获取（间接方法）
注意：服务器无法直接获取客户端屏幕宽度,需通过以下方式：
- 前端传递：通过Cookie/LocalStorage或API请求发送宽度
- 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：建议采用响应式布局方案：
- 使用CSS媒体查询：
@media (max-width: 768px) { /* 平板/手机样式 */ } - 动态计算比例：
const baseWidth = 1920; // 设计基准宽度 const ratio = getBrowserWidth() / baseWidth; document.body.style.zoom = ratio; // 简单缩放示例
- 使用rem单位配合js动态设置html字体：
const root = document.documentElement; root.style.fontSize = `${window.innerWidth / 10}px`;
以上就是关于“api 取屏幕宽度”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!
【版权声明】：本站所有内容均来自网络，若无意侵犯到您的权利，请及时与我们联系将尽快删除相关内容!
