@xlou/viewport

Languages

• English
• 简体中文
• 日本語
• 한국어
• Français

Introduction

• Solve the problem of page adaptation in H5 development, especially mobile development
• Excellent performance, the page don't need to be re-rendered

Principle

• 1rem is equal to the "font-size" of the html root element, the default is 16px
• Dynamically changing the font-size of the root can change the size of the rem

Usage

Using the Script Tag

<script src="https://unpkg.com/@xlou/viewport@1.0.0/dist/umd/viewport.min.js"></script>
<!-- It's recommended to download and use the file locally -->
<script>
  /* After including this JS file, the viewport object will be available on the window */
  vp.init({/* options */})
</script>

In a Node.js Project

Installation

npm i @xlou/viewport -S

In main.js or main.ts

/* Using the entire package */
import vp from '@xlou/viewport'

/* Recommended configuration on the mobile */
vp.init({
  width: 375, // The design draft here is 375px, and if it's 750px, then set it to 750.
  fontSize: '0.14rem'
})

/* PC recommended configuration (design draft is 1920px)  */
vp.init({
  width: 1920,
  metaViewport: false,
  fontSize: '0.14rem'
})

API

vp

interface Options {
  width?: number;
  mobile?: boolean;
  fontSize?: string;
  metaViewport?: boolean;
  userScalable?: string | null;
  initialScale?: string | null;
  minimumScale?: string | null;
  maximumScale?: string | null;
}
interface StoreOptions {
  options: Options;
  docInfo: {
    meta: Element;
    rootSize: string;
  };
}
const vp: {
  init(options: Options): void;
  readonly info: StoreOptions;
}

Introduction to init options

If the attribute that supports "null" is set to null, the "meta" tag will not configure the attribute.

When "mobile" is set to false, for example, the width of the target in the design is 20px, then set 20rem in the code.
When "mobile" is set to true (use the mobile compatibility mode), if the width of the target in the design is 20px, then set 0.2rem in the code (that is, divide the design value by 100).

Introduction to info attributes

docInfo:

• meta: HTMLMetaElement, return meta tag of this page

• rootSize: string, return the font-size of root

options: object, return the options of "vp" this page