LandscapeSimulator

Online Use | 中文 | Changelog | Issue | Gitee

1. Features

1. Typescript writing
2. Support mobile vertical screen rotation to simulate horizontal screen
3. Get the simulated landscape state and length and width

2. Quick use

1.1 npm way

npm i landscape-simulator

import LandscapeSimulator from 'landscape-simulator';

LandscapeSimulator.init({
  disablePc: false, // default is true
})

It is recommended to place the above initialization code in the head for execution

1.2 cdn

When using the cdn method, the script tag can be placed in the head

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

You can use the property auto-simulate=true to control to use auto-on simulation, the default is false

You can use the attribute disable-pc=false to control the simulation to be enabled on the pc side. The default is not to enable it on the pc side.

When referenced by cdn, the LandscapeSimulator object will be mounted on the window

2 APIs

2.1 init

Initialize the simulator, which will be automatically initialized when referenced by cdn

const isSimulated = await LandscapeSimulator.init({
  disablePc: false, // default is true
});

2.2 appendChild

Add child elements to a rotating container

LandscapeSimulator.appendChild(htmlElement);

2.3 getSimulateSize

Get the emulated later screen size

const size = LandscapeSimulator.getSimulateSize();

2.4 isSimulateLandscape

Get whether it is currently in a state of simulating a landscape screen

const bool = LandscapeSimulator.isSimulateLandscape();

2.5 onSimulateChange

Listen for changes in the state of the simulated horizontal screen

LandscapeSimulator.onSimulateChange(isSimulate => {
  
});

2.6 isEnabled

const bool = LandscapeSimulator.isEnabled()

2.7 getContainer

const container = LandscapeSimulator.getContainer()