屏幕适配

移动端

Tiny.js 致力于移动端表现，也期望能用最少的配置达到全端自适应。

场景	启动参数	备注
全屏（320）	无	原图链接示例源码
全屏（375）	`referWidth: 375`	原图链接示例源码
全屏（高 667）	`referWidth: 667 * window.innerWidth / window.innerHeight`	原图链接示例源码
全屏（320 横屏）	`orientation: 1`	原图链接示例源码
全屏（375 横屏）	`orientation: 1` `referWidth: 375`	原图链接示例源码
固定尺寸（280*180）	`height: 180` `width: 280` `fixSize: true`	原图链接示例源码
固定尺寸（280*180 弹性）	`height: 180` `width: 280`	原图链接示例源码

Tips
全屏（320）：以宽（640）的视觉设计尺寸，以宽为参考
全屏（375）：以宽（750）的视觉设计尺寸，以宽为参考
全屏（高 667）：以宽（750）的视觉设计尺寸，以高（1334）为参考
全屏（320 横屏）：以高（640）的视觉设计尺寸，以高为参考
全屏（375 横屏）：以高（750）的视觉设计尺寸，以高为参考
固定尺寸（280*180）：以宽（560）、高（360）的视觉设计尺寸，任何分辨率的设备宽高都是固定的像素值（移动端不推荐）
固定尺寸（280*180 弹性）：以宽（560）、高（360）的视觉设计尺寸，任何分辨率的设备宽高都以当前设备分辨率弹性计算（类似 rem）

下面我们对上表进行补充说明：

上图视觉的设计尺寸是宽 640，那么它的 dpi 就是 2，referWidth 是 320，故启动参数为：

{
  dpi: 2,
  referWidth: 320,
}

为更直接的对比，我们使用一个简单的标尺衡量一下：

如果视觉的设计尺寸是宽 750，那么它的 dpi 还是 2，referWidth 就是 375，故启动参数为：

{
  dpi: 2,
  referWidth: 375,
}

如果有些场景需要我们以高为参考对象（即场景中的精灵的位置只能通过纵向设定），那么，我们需要对 referWidth 做一下换算，即：

{
  dpi: 2,
  referWidth: 667 * window.innerWidth / window.innerHeight,
}

换算公式：(视觉稿高度 / 2) * 显示宽度 / 显示高度

如果不是全屏的场景，那么就直接使用固定宽高值就行，但是最好不要（除非情况特殊）固定尺寸，这样 Tiny.js 才会帮你自动适配：

{
  dpi: 2,
  height: 180,
  width: 280,
}

PC

PC 场景下，基本就只要固定尺寸就行，如果是全屏，那么启动参数就是：

{
  height: window.innerHeight,
  width: window.innerWidth,
  fixSize: true,
}

示例源码

如果不是全屏，直接设置宽高就可以：

{
  height: 400,
  width: 780,
  fixSize: true,
}

示例源码

Tiny.WIN_SIZE

可见区域的尺寸应该在很多时候都会用到，Tiny 提供了一个全局静态变量 WIN_SIZE，通过它可以快速获取的可见区域的尺寸：

console.log(Tiny.WIN_SIZE);
//=> {width: 560, height: 360}

注意
Tiny.WIN_SIZE 是根据适配计算得出的，所以，它是安全可靠的，以它为标准去定位场景中各个精灵的位置是准确高效的。

# 屏幕适配

# 移动端

# PC

# Tiny.WIN_SIZE

屏幕适配

移动端

PC

Tiny.WIN_SIZE