背景多端适配用什么模式？

转载已于 2023-11-09 17:23:45 修改 · 158 阅读

文章标签：

#cocos2d

于 2023-11-09 17:19:55 首次发布

本文介绍了在开发中如何根据屏幕宽高比变化，选择FitWidth模式适应宽度或FitHeight模式适应高度，以实现背景图片在iPad和iPhoneX等设备上的优化适配。通过计算视图尺寸的宽高比，确定采用哪种模式调整Canvas的尺寸。

背景多端适配用什么模式？
在屏幕分辨率宽高比小于设计分辨率宽高比（iPad 情况）时，我们希望在宽度一致的情况下在上下两侧展示更多的背景区域，这个时候就需要使用 Fit Width；在屏幕分辨率宽高比大于设计分辨率宽高比（iPhoneX 情况）时，我们希望在高度一致的情况下在左右两侧展示更多的背景区域，这个时候就需要使用 Fit Height。

在代码中我们可以通过获取当前视图大小来得到实际屏幕分辨率的宽高比，根据宽高比来决定是使用 Fit Height 模式还是 Fit Width 模式。

exportfunction setCanvasScaleMode(canvas: cc.Canvas) {
  const standardRadio = 16 / 9; // 标准宽高比，差不多就是iPhone6的宽高比（横屏），一般设计稿以此为标准  
  const screenSize = cc.view.getFrameSize();
  const currentRadio = screenSize.width / screenSize.height; // 宽高比 
   if (currentRadio <= standardRadio) {
    // 偏方形的屏幕，代表是iPad之类的。
    canvas.fitHeight = false;
    canvas.fitWidth = true;
  } else {
    // 偏长的屏幕，代表是ipx。太长了，高度显得小，所以优先适配高度
    canvas.fitWidth = false;
    canvas.fitHeight = true;
  }
}