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:

<script src="https://unpkg.com/vanilla-device@1.0.7/umd/index.js"></script>

npm:

$ npm install --save vanilla-device

Feature

1. Get Device details:

import "vanilla-device";

console.log(vanillaDevice.isPc());
console.log(vanillaDevice.isIPhoneX());
console.log(vanillaDevice.safeTop());

2. Safe CSS:

1. import package

import vanillaDevice from "vanilla-device";

2. use css value

.page {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

3. If your use CSS-IN-JS

import vanillaDevice from "vanilla-device";

const safeTop = vanillaDevice.safeTop();

<div style="{{ paddingTop: safeTop }} />

3. Touch:

1. Double-clicking the screen will not scale
2. Finger kneading won't zoom in on the screen

import vanillaDevice from "vanilla-device";

vanillaDevice.setMobileCss();

4. Scroll like native:

1. When the scroll area receives the scroll gesture, it can respond quickly and solve the problem of no response when switching overflow
2. Block all scrolling. Scrolling will not show the background of the browser

import vanillaDevice from "vanilla-device";

// use setFocusTouchScroll
const view = document.getElementById("the-need-scroll-element");
vanillaDevice.setCanScroll(view);

If in React or Vue:

import vanillaDevice from "vanilla-device";

// or set focus-touch-scroll to dom, need have height
vanillaDevice.setCanScrollByAttribute('data-can-scroll');
const view = <div data-can-scroll="true" style={{ height: 500 }} />;

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

import vanillaDevice from "vanilla-device";

vanillaDevice.setKeyboardAutoHide();