前言

本文章針對H5開發(fā)的單頁全屏無滾動頁面。

解決方案

整體采用vw、vh作為基本單位，采用flex布局，針對字體使用rem單位。

多終端適配

針對app包下載等業(yè)務場景，需要識別對應的終端，采用不同的地址下載。針對微信特定情況，需要引導用戶去往瀏覽器打開。
識別終端類型可以采用如下方式：

// 微信
const isWeixin = () => {
  let ua = window.navigator.userAgent.toLowerCase();
  return ua.match(/MicroMessenger/i) == 'micromessenger';
};

// Android
const isAndroid = () => {
  let u = window.navigator.userAgent;
  return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
};

// iOS
const isIOS = () => {
  let u = window.navigator.userAgent;
  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
};

橫豎屏切換

js作為瀏覽器運行語言，無法控制設備的橫豎屏切換。我們可以做一些兼容的處理。

首先，要監(jiān)測出用戶切換了橫豎屏，檢測方法：

1. window.matchMedia

const checkMediaOritation = () => {
  const mql = window.matchMedia('(orientation: portrait)');

  mql.addListener(() => {
    if (mql.matches) {
      // 豎屏
    } else {
      // 橫屏
    }
  });
};

2. window.innerWidth > window.innnerHeight

window.addEventListener("resize", () => {
  let h = window.innerHeight, w = window.innerWidth;
  if(h > w) {
    // 豎屏
  } else {
    // 橫屏
  }
});

監(jiān)測到用戶切換橫豎屏后，常見處理方式有三種：

1. 給予用戶提示信息，讓用戶保持其中一種模式操作
2. 頁面整體旋轉(zhuǎn)，保持頁面布局不變
3. 頁面自適應，出現(xiàn)滾動條

其中第1種和第3種比較好理解，第2種處理方式如下：

1. 采用js控制transform方式整體rotate(-90deg)

// 以豎屏布局為主，適配橫屏
  let h = window.innerHeight, w = window.innerWidth;
  if(h > w) {
    document.getElementById("rootElement").transform = "rotate(0deg)";
  } else {
    let height = document.getElementById("rootElement").clientHeight;
    let width = document.getElementById("rootElement").clientWidth;
    document.getElementById("rootElement").transform = "rotate(-90deg)";
    document.getElementById("rootElement").transformOrigin = height / 2 + "px " + height / 2 + "px"; // 如果rotate 90deg，則這里取 width / 2
  }

2. 在第一種方式上優(yōu)化，用css的方式控制

  let h = window.innerHeight, w = window.innerWidth;
  if(h > w) {
    rootElement.className = "someClass";
  } else {
    rootElement.className += " rotate";
  }

然后把所有的切換后的樣式寫在rotate上，rotate下所有元素的單位vh 和 vw互換。對應的rem也要同步調(diào)整

.rotate {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg);
  transform-origin: 50vh 50vh;
}

如有問題，還望不吝賜教。