PC项目移动端适配实战 | Viewport Meta配置与DPR动态计算实践

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

/**
 * 动态计算设备像素比（DPR）并根据 DPR 缩放视口，同时存储 DPR 信息供 CSS 使用。
 * 此操作可确保页面在不同 DPR 的设备上能正确显示，避免因 DPR 差异导致的布局和显示问题。
 */
// 获取当前设备的像素比（DPR），若获取失败则默认 DPR 为 1
const dpr = window.devicePixelRatio || 1;
// 计算缩放比例，通过 1 除以 DPR 得到合适的缩放值
const scale = 1 / dpr;
// 通过选择器查找 name 属性为 "viewport" 的 meta 标签
const viewportMeta = document.querySelector('meta[name="viewport"]');
// 动态设置 viewport meta 标签的 content 属性，将页面宽度设置为设备宽度，
// 并将初始缩放比例和最大缩放比例设置为计算得到的 scale 值，同时禁止用户手动缩放
viewportMeta.setAttribute('content', `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`);
// 在 HTML 根元素上设置 data-dpr 属性，将当前设备的 DPR 值存储起来，方便后续在 CSS 中使用
document.documentElement.setAttribute('data-dpr', dpr); 

// 设备像素比检测
const dpr = window.devicePixelRatio || 1;

// 动态设置缩放比例
const scale = 1 / dpr;
document.querySelector('meta[name="viewport"]')
  .setAttribute('content', 
    `width=device-width,
     initial-scale=${scale},
     maximum-scale=${scale},
     user-scalable=no`);

<img 
  src="image@1x.jpg" 
  srcset="image@2x.jpg 2x, image@3x.jpg 3x"
  alt="DPR适配示例"
>

/* 基于data-dpr的缩放 */
.border-1px {
  position: relative;
}
[data-dpr="1"] .border-1px::after {
  transform: scaleY(1);
}
[data-dpr="2"] .border-1px::after {
  transform: scaleY(0.5);
}
[data-dpr="3"] .border-1px::after {
  transform: scaleY(0.33);
}
.border-1px::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 保持CSS 1px */
  background: #000;
  transform-origin: 0 0;
}

实际物理像素 = CSS像素 * DPR * scaleY
示例：
当DPR=2时 => 1px * 2 * 0.5 = 1物理像素

function setRem() {
  const designWidth = 750; // 设计稿宽度（iPhone 6标准）
  const baseSize = 100;    // 1rem = 100px（简化计算）
  const clientWidth = Math.min(document.documentElement.clientWidth, 1024); // 限制最大宽度
  const rem = (clientWidth / designWidth) * baseSize;
  document.documentElement.style.fontSize = `${rem}px`;
}
window.addEventListener('resize', setRem);

import { ConfigProvider } from 'antd-mobile';
import zhCN from 'antd-mobile/es/locales/zh-CN';

const App = () => (
  <ConfigProvider locale={zhCN} pxTransform={(px) => px * 2}>
    {/* 组件自动适配 */}
  </ConfigProvider>
);

// 基准值计算
const baseSize = 100 * (window.innerWidth / 750);
document.documentElement.style.fontSize = baseSize + 'px';

// 窗口变化监听
window.addEventListener('resize', () => {
  document.documentElement.style.fontSize = 
    100 * (window.innerWidth / 750) + 'px';
});

元素实际尺寸 = 设计稿尺寸 * (当前视口宽度/750)
示例：
设计稿200px元素 => 200*(375/750)=100px

rem基准值 = 100 * (当前视口宽度 / 设计稿基准宽度)
示例：
当视口宽度=375px时 => 100*(375/750)=50px
即：1rem=50px

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100,       // 1rem = 100px
      propList: ['*', '!border'], // 边框不转换
      selectorBlackList: ['.ant-'] // 忽略Ant Design组件
    }
  }
}

/* 设计稿750px中100px元素 → 100/750 * 100 = 13.333vw */
.container {
  width: 13.333vw; 
  font-size: clamp(14px, 1.5vw, 16px); /* 字体大小限制区间 */
}

/* 低版本浏览器兜底 */
.container {
  width: 100%; /* 流动布局 */
  max-width: 1200px; /* 桌面端限制 */
}
@supports (display: flex) {
  .container { display: flex; } /* 渐进增强 */
}