landscape-simulator v0.0.1

LandscapeSimulator

在线体验 | English | 更新日志 | Issue | Gitee

• 1. 特性
• 2. 快速使用
  • 1.1 npm 方式
  • 1.2 cdn
• 2 API
  • 2.1 init
  • 2.2 appendChild
  • 2.3 getSimulateSize
  • 2.4 isSimulateLandscape
  • 2.5 onSimulateChange

1. 特性

1. typescript 编写
2. 支持移动端竖屏旋转模拟横屏
3. 获取模拟横屏状态与长宽

2. 快速使用

1.1 npm 方式

npm i landscape-simulator

import LandscapeSimulator from 'landscape-simulator';

LandscapeSimulator.init({
  disablePc: false, // 默认为true
})

推荐将上述初始化代码置于head中执行

1.2 cdn

使用cdn方式时，可将script标签放置在head中

<script src="https://cdn.jsdelivr.net/npm/landscape-simulator/landscape-simulator.min.js"></script>

可以使用属性 auto-simulate=false 来控制不要使用自动开启模拟，默认为自动开启。

可以使用属性 disable-pc=false 来控制在pc端也开启模拟，默认为在pc端不开启。

使用cdn方式引用时，会在window上挂载 LandscapeSimulator 对象

2 API

2.1 init

初始化模拟器，使用cdn方式引用时会自动初始化

LandscapeSimulator.init({
  disablePc: false, // 默认为true
})

2.2 appendChild

往旋转容器中添加子元素

LandscapeSimulator.appendChild(htmlElement);

2.3 getSimulateSize

获取模拟的过后的屏幕尺寸

const size = LandscapeSimulator.getSimulateSize();

2.4 isSimulateLandscape

获取当前是否处于模拟横屏的状态

const bool = LandscapeSimulator.isSimulateLandscape();

2.5 onSimulateChange

监听模拟横屏状态改变

LandscapeSimulator.onSimulateChange(isSimulate => {
  
});