因为新的活动或需求，需要对本身不支持适配移动端的网站做部分页面需要移动端适配，对之前的页面又不能造成影响，年初碰到此类需求，对此做记录与分享，请大家指教。
框架Angular8 + ng-zorro
Angular8框架本身也有支持移动端的UI组件库ng-zorro mobile,因为项目并不是移动端与网页端分开，担心引入移动UI组件后会对本身网页造成影响，并且免于设计再次设计移动端的设计图，在考虑最小修改成本后，做粗略的移动端适配–px转换rem适配移动端。
实现思路类似flexible，通过js来调整html的字体大小，而在页面中的制作稿则统一使用rem这个单位来制作，主要是改变了dpr和document的font-size大小。
首先 将主流机型进行声明 以下声明 iPhone android google firefox blackberry 等等
const appleIphoneReg = /iPhone/i;const appleIpodReg = /iPod/i;const appleTabletReg = /iPad/i;const androidPhoneReg = /\bAndroid(?:.+)Mobile\b/i; // Match 'Android' AND 'Mobile'const androidTabletReg = /Android/i;const amazonPhoneReg = /(?:SD4930UR|\bSilk(?:.+)Mobile\b)/i; // Match 'Silk' AND 'Mobile'const amazonTabletReg = /Silk/i;const windowsPhoneReg = /Windows Phone/i;const windowsTabletReg = /\bWindows(?:.+)ARM\b/i; // Match 'Windows' AND 'ARM'const otherBlackBerryReg = /BlackBerry/i;const otherBlackBerry10Reg = /BB10/i;const otherOperaReg = /Opera Mini/i;const otherChromeReg = /\b(CriOS|Chrome)(?:.+)Mobile/i;const otherFirefoxReg = /Mobile(?:.+)Firefox\b/i; // Match 'Mobile' AND 'Firefox'
识别运行环境 return 正在使用哪种设备浏览页面
function matchDevice(regex, userAgent) {return regex.test(userAgent);}function deviceType(userAgent) {userAgent = userAgent || (typeof navigator !== 'undefined' ? navigator.userAgent : '');let tmp = userAgent.split('[FBAN');if (typeof tmp[1] !== 'undefined') {userAgent = tmp[0];}tmp = userAgent.split('Twitter');if (typeof tmp[1] !== 'undefined') {userAgent = tmp[0];}const result = {apple: {phone: matchDevice(appleIphoneReg, userAgent) && !matchDevice(windowsPhoneReg, userAgent),ipod: matchDevice(appleIpodReg, userAgent),tablet: !matchDevice(appleIphoneReg, userAgent) && matchDevice(appleTabletReg, userAgent) && !matchDevice(windowsPhoneReg, userAgent),device: (matchDevice(appleIphoneReg, userAgent) || matchDevice(appleIpodReg, userAgent) || matchDevice(appleTabletReg, userAgent)) && !matchDevice(windowsPhoneReg, userAgent),},amazon: {phone: matchDevice(amazonPhoneReg, userAgent),tablet: !matchDevice(amazonPhoneReg, userAgent) && matchDevice(amazonTabletReg, userAgent), device: matchDevice(amazonPhoneReg, userAgent) || matchDevice(amazonTabletReg, userAgent),},android: {phone: (!matchDevice(windowsPhoneReg, userAgent) && matchDevice(amazonPhoneReg, userAgent)) || (!matchDevice(windowsPhoneReg, userAgent) && matchDevice(androidPhoneReg, userAgent)),tablet: !matchDevice(windowsPhoneReg, userAgent) && !matchDevice(amazonPhoneReg, userAgent) && !matchDevice(androidPhoneReg, userAgent) && (matchDevice(amazonTabletReg, userAgent) || matchDevice(androidTabletReg, userAgent)),device: (!matchDevice(windowsPhoneReg, userAgent) && (matchDevice(amazonPhoneReg, userAgent) || matchDevice(amazonTabletReg, userAgent) || matchDevice(androidPhoneReg, userAgent) || matchDevice(androidTabletReg, userAgent))) || matchDevice(/\bokhttp\b/i, userAgent),},windows: {phone: matchDevice(windowsPhoneReg, userAgent),tablet: matchDevice(windowsTabletReg, userAgent),device: matchDevice(windowsPhoneReg, userAgent) || matchDevice(windowsTabletReg, userAgent),},other: {blackberry: matchDevice(otherBlackBerryReg, userAgent),blackberry10: matchDevice(otherBlackBerry10Reg, userAgent),opera: matchDevice(otherOperaReg, userAgent),firefox: matchDevice(otherFirefoxReg, userAgent),chrome: matchDevice(otherChromeReg, userAgent),device: matchDevice(otherBlackBerryReg, userAgent) || matchDevice(otherBlackBerry10Reg, userAgent) || matchDevice(otherOperaReg, userAgent) || matchDevice(otherFirefoxReg, userAgent) || matchDevice(otherChromeReg, userAgent),},any: false,phone: false,tablet: false,};result.any = result.apple.device || result.android.device || result.windows.device || result.other.device;result.phone = result.apple.phone || result.android.phone || result.windows.phone;result.tablet = result.apple.tablet || result.android.tablet || result.windows.tablet;return result;}
页面加载时自运行函数，此函数会在标签上增加一个data-dpr属性和font-size样式，根据不同的设备计算dpr
(function (win, adapt) {if (deviceType().any) {var doc = win.document;var docEl = doc.documentElement;var dpr = 0;var tid;var fn = adapt.fn || (adapt.fn = {});dpr = parseInt(window.devicePixelRatio);docEl.setAttribute('data-dpr', dpr);function refreshRem() {var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';fn.rem = win.rem = rem;}win.addEventListener('resize', function () {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}, false);win.addEventListener('pageshow', function (e) {if (e.persisted) {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === 'complete') {doc.body.style.fontSize = 12 * dpr + 'px';} else {doc.addEventListener('DOMContentLoaded', function (e) {doc.body.style.fontSize = 12 * dpr + 'px';}, false);}refreshRem();fn.dpr = win.dpr = dpr;fn.refreshRem = refreshRem;fn.rem2px = function (d) {var val = parseFloat(d) * this.rem;if (typeof d === 'string' && d.match(/rem$/)) {val += 'px';}return val;}fn.px2rem = function (d) {var val = parseFloat(d) / this.rem;if (typeof d === 'string' && d.match(/px$/)) {val += 'rem';}return val;}}})(window, window['adapt'] || (window['adapt'] = {}));
底层js就是以上代码实现，
判断此时是在哪种设备上运行 引入一个三方件判断是否为手机浏览器
import isMobile from 'ismobilejs';
deviceDetection: any = isMobile(navigator.userAgent);
使用时 在页面加载开始判断,根据deviceDetection.any判断运行环境，写不同的代码来适配移动端
PC:
<div class="about-wrap"></div>
移动端:
<div class="phone-about"></div>
css中，以设计稿尺寸为准，假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。
我们设计稿基准为375
$ratio: 75; //基准font-size@function pr($px) {@return $px / $ratio * 1rem;}
按照设计稿尺寸*2，设置长宽，例如width：34px;我们使用时就应该如下：
width: pr(68);
此方案还是很粗简，不是很全面，希望大家有好的提议可以随时赐教。
