LandscapeSimulator (--)

LandscapeSimulator

Online Use | English | 更新日志 | 反馈错误/缺漏


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"></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

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()