https://github.com/ymzuiku/vanilla-device
device checker
https://github.com/ymzuiku/vanilla-device
Last synced: about 2 months ago
JSON representation
device checker
- Host: GitHub
- URL: https://github.com/ymzuiku/vanilla-device
- Owner: ymzuiku
- License: mit
- Created: 2019-10-23T16:23:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T13:30:17.000Z (over 2 years ago)
- Last Synced: 2025-02-21T05:06:40.607Z (2 months ago)
- Language: TypeScript
- Size: 1.14 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vanilla-device
- Get mobile device detail
The introduction of mobile-touch, if the device is a mobile device, can make the whole page scroll closer to native and support Typescript
## Install
unpkg:
```html
```
npm:
```sh
$ npm install --save vanilla-device
```
## Feature
### 1. Get Device details:
```js
import "vanilla-device";
console.log(vanillaDevice.isPc());
console.log(vanillaDevice.isIPhoneX());
console.log(vanillaDevice.safeTop());
```
### 2. Safe CSS:
1. import package
```js
import vanillaDevice from "vanilla-device";
```
2. use css value
```css
.page {
padding-top: var(--safe-top);
padding-bottom: var(--safe-bottom);
}
```
3. If your use CSS-IN-JS
```js
import vanillaDevice from "vanilla-device";
const safeTop = vanillaDevice.safeTop();
;
```
### 5. Keyboard:
1. When the iOS keyboard appears, click the blank area to automatically close the keyboard
2. Automatically adjust the scroll area when the iOS keyboard appears
```js
import vanillaDevice from "vanilla-device";
vanillaDevice.setKeyboardAutoHide();
```