当前位置：首页 > JavaScript

js实现适配

2026-04-05 10:30:33JavaScript

JavaScript 实现适配的方法

视口（Viewport）适配

通过设置 <meta> 标签控制视口缩放比例：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

使用 CSS 的 vw/vh 单位实现动态尺寸：

.box {
  width: 50vw; /* 视口宽度的50% */
  height: 30vh; /* 视口高度的30% */
}

媒体查询（Media Query）适配

根据不同屏幕尺寸应用不同样式：

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

JavaScript 动态检测屏幕变化：

window.addEventListener('resize', () => {
  if (window.innerWidth < 768) {
    document.body.classList.add('mobile-mode');
  } else {
    document.body.classList.remove('mobile-mode');
  }
});

REM 适配方案

动态计算根元素字体大小：

function setRem() {
  const docEl = document.documentElement;
  const width = docEl.clientWidth;
  const rem = width / 10; // 将屏幕分为10份
  docEl.style.fontSize = rem + 'px';
}
window.addEventListener('resize', setRem);
setRem();

配合 CSS 使用 REM 单位：

.header {
  height: 1rem; /* 相当于屏幕宽度的10% */
}

图片适配方案

使用 srcset 属性提供多分辨率图片：

<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 480px, 800px">

JavaScript 动态加载图片：

function loadAdaptiveImage() {
  const img = new Image();
  img.src = window.innerWidth > 768 ? 'large.jpg' : 'small.jpg';
  document.body.appendChild(img);
}

设备像素比（DPR）适配

检测设备像素比并调整显示：

const dpr = window.devicePixelRatio || 1;
const scale = 1 / dpr;
document.querySelector('meta[name="viewport"]')
  .setAttribute('content', `width=device-width, initial-scale=${scale}`);

横竖屏适配

检测屏幕方向变化：

window.addEventListener('orientationchange', () => {
  if (Math.abs(window.orientation) === 90) {
    console.log('横屏模式');
  } else {
    console.log('竖屏模式');
  }
});

移动端事件适配

统一处理触摸和鼠标事件：

js实现适配

element.addEventListener('touchstart', handleStart);
element.addEventListener('mousedown', handleStart);

function handleStart(e) {
  e.preventDefault();
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  // 处理坐标逻辑
}

标签: js