前言

本文章針對(duì)H5開(kāi)發(fā)的單頁(yè)全屏無(wú)滾動(dòng)頁(yè)面。

解決方案

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

多終端適配

針對(duì)app包下載等業(yè)務(wù)場(chǎng)景，需要識(shí)別對(duì)應(yīng)的終端，采用不同的地址下載。針對(duì)微信特定情況，需要引導(dǎo)用戶去往瀏覽器打開(kāi)。
識(shí)別終端類型可以采用如下方式：

// 微信 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作為瀏覽器運(yùn)行語(yǔ)言，無(wú)法控制設(shè)備的橫豎屏切換。我們可以做一些兼容的處理。

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

window.matchMedia

const checkMediaOritation = () => {const mql = window.matchMedia('(orientation: portrait)');mql.addListener(() => {if (mql.matches) {// 豎屏} else {// 橫屏}}); };

window.innerWidth > window.innnerHeight

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

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

給予用戶提示信息，讓用戶保持其中一種模式操作

頁(yè)面整體旋轉(zhuǎn)，保持頁(yè)面布局不變

頁(yè)面自適應(yīng)，出現(xiàn)滾動(dòng)條

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

采用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}

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

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

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

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

如有問(wèn)題，還望不吝賜教。

總結(jié)

以上是生活随笔為你收集整理的H5页面适配iOS、Android和微信的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。