screen-orientation-js
v1.0.2
Published
Informs the user with an animated message that he shouldn't use the current app in landscape mode on mobile devices.
Downloads
141
Maintainers
asmarenasReadme
screen-orientation-js
Displays an animated full-screen message when the mobile device's screen is rotated horizontally.
Some applications or websites may display content properly only in portrait orientation on the mobile devices. To prevent the website's layout from breaking , screen-orientation-js informs the user that the app can't be viewed in landscape orientation.
Installation
$ npm install screen-orientation-jsUsage
const screenOrientationJs = require('screen-orientation-js');
// or
import * as screenOrientationJs from 'screen-orientation-js';
// Initialize with custom settings
screenOrientation.init({
color: "#7c692d",
bgColor: "#2d7c72",
animation: false,
fontSize: 3
});
// or with default
screenOrientationJs.init();Using directly in a browser
Place <script> tag in the <head> section.
<script src="https://unpkg.com/screen-orientation-js"></script>screenOrientationJs is available as a global variable, or window.screenOrientationJs
<script>
// init with custom settings
screenOrientationJs.init({bgColor: "#2d7c72"})
// or with default
screenOrientationJs.init();
</script>Options
You can change the default settings by passing the config object. The default setting values will be used for non-passed values.
| Key | Value type| Description | Default value |
|:-------------|:----------|:--------------------------------------------------|:------------------------------------------ |
| message: | string | The custom message to display. | ""Landscape orientation is not support..." |
| color: | string | Text color. | #0000 |
| fontSize: | number | Font size. Recommended values 1-6. | 5 |
| bgColor: | string | Background color. | #ffff |
| animation: | boolean | The rotating phone animation. | true |
| iconColor: | string | Icon color. | #1D1D1D |
| iconSize: | number | Icon size. | 10 |
| minHeight: | number | Min viewport height in landscape mode for the component to be inactive| 500