- 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
unpkg:
<script src="https://unpkg.com/vanilla-device@1.0.7/umd/index.js"></script>
npm:
$ npm install --save vanilla-device
import "vanilla-device";
console.log(vanillaDevice.isPc());
console.log(vanillaDevice.isIPhoneX());
console.log(vanillaDevice.safeTop());
- import package
import vanillaDevice from "vanilla-device";
- use css value
.page {
padding-top: var(--safe-top);
padding-bottom: var(--safe-bottom);
}
- If your use CSS-IN-JS
import vanillaDevice from "vanilla-device";
const safeTop = vanillaDevice.safeTop();
<div style="{{ paddingTop: safeTop }} />
- Double-clicking the screen will not scale
- Finger kneading won't zoom in on the screen
import vanillaDevice from "vanilla-device";
vanillaDevice.setMobileCss();
- When the scroll area receives the scroll gesture, it can respond quickly and solve the problem of no response when switching overflow
- 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 }} />;
- When the iOS keyboard appears, click the blank area to automatically close the keyboard
- Automatically adjust the scroll area when the iOS keyboard appears
import vanillaDevice from "vanilla-device";
vanillaDevice.setKeyboardAutoHide();