モバイル端末remの使用とHD対応

一、関連概念
rem(font size of the root element)とは、ルート要素(html)に対するフォントサイズの単位を指す.簡単に言えば相対単位です.Em(font size of the element)とは、親要素に対するフォントサイズの単位を指す.それらの間には実際には似ていますが、計算のルールはルート要素に依存し、親要素に依存して計算されます.
デバイス物理画素:一般的にデバイス画面に点滅できる点がいくつあるかは具体的な概念です.例えば、iphone 6の横には750個の色を変えることができる点があります.テレビと似ています.10年前に買ったヘッドテレビがあれば、画面の前に伏せてRGBの点が見えます.これがデバイスの物理画素です.
デバイス独立ピクセル:デバイス独立ピクセルは、プログラム内のcssのような仮想概念です.例えば、div幅を10ピクセルに設定すると、pc上でこのdivが画面の10ポイントに表示されます.
dpr:デバイス物理画素/デバイス独立画素

iphone 3 Gデバイス物理画素320個のポイントデバイス独立画素320 pxではdprは1

である.

iphone 6デバイス物理画素750ドットデバイス独立画素375 pxではdprは2

である.

iphoneXデバイス物理画素1125点デバイス独立画素375 pxではdprは3

である.
二、解決すべき問題
1、フォントの大きさは携帯電話の画面の大きさによって合わせなければならない
2、画像は異なる携帯電話のdprによって適応する必要がある(スクリーンハイビジョン画像の問題を解決する)
3、移動端0.5 px細線の問題を解決する.
三、解決方法
1、異なる携帯電話の画面サイズとdprによってhtmlルートフォントサイズを設定し、remレイアウトを使用する.
2、ページウィンドウの拡大・縮小を設定します.

function flex (baseFontSize, normal, fontscale) {
  const win = window
  const REM_BASE_SIZE = 100
  const _baseFontSize = baseFontSize || REM_BASE_SIZE
  // const _fontscale = fontscale || 1
  const doc = win.document
  const ua = navigator.userAgent
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i)
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i)
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi)
  let dpr = win.devicePixelRatio || 1
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    //    iOS,  Android4.3  ,  UC  ,       , dpr  1;
    dpr = 1
  }
  const scale = normal ? 1 : 1 / dpr
  localStorage.setItem('initial-scale', scale)
  let metaEl = doc.querySelector('meta[name="viewport"]')
  if (!metaEl) {
    metaEl = doc.createElement('meta')
    metaEl.setAttribute('name', 'viewport')
    doc.head.appendChild(metaEl)
  }
  const currentScreenW = window.screen.availWidth || 375
  console.log(currentScreenW)
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`)
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * currentScreenW / 375}px`
  let _fontscale_ = 1
  if (currentScreenW < 375) {
    _fontscale_ = currentScreenW / 375
    doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * currentScreenW / 375}px`
  }
  localStorage.setItem('font-scale', _fontscale_)
}
export default flex(75)

、  

1、 html mata|viewport ， dpr 。

2、 dpr=1 ， 。 ：

• px2rem-loader px rem， px2rem-loader remUnit rem 。 iphone6（dpr=2） 100px，px2rem-loader remUnit 50。 iphone6（dpr=2） 75px（ UI 375），px2rem-loader remUnit 37.5。
• ，px2rem-loader px rem。（ ， ， ， ）

3、img width height ， ， dpr。

4、echart rem， （ ， ） html 。

• iphone6（dpr=2） 75px，UI （375px） 18px， echart 18*2/75=48%。

、

rem ： lib-flexible px2rem-loader。

1、 lib-flexible， dpr mata|viewport

2、 px2rem-loader px rem， （ ）

3、 375px ， px2rem-loader 37.5， 。

：

1、lib-flexible dpr ， ， drp=1。

2、 （ rem） html mata|viewport ， ， dpr=1， lib-flexible ， 。 。

、

1、 flexible.js， 1rem=100px（iphone6）， UI rem/px 50， rem， px2rem-loader px rem，remUnit 50。1px 0.02rem。

2、 flexible.js， 1rem=75px（iphone6）， UI rem/px 37.5， px， px2rem-loader px rem，remUnit 37.5。1px 。