移动端适配方案非常多，入行两年来始终没有一直使用一个标准，每个项目都按照业务需求来做适配
方案一：
最初听李彦辉老师的课程使用rem 布局了一段时间，但是字体计算比较麻烦，也不太精确
方案二：
偶然在Q群里一群友分享的 动态改变根节点字体的方案布局，头部引用一个js。按照设计图的像素写rem，100px = 1rem
//控制字体 var calculate_size = function() { var BASE_FONT_SIZE = 100; var docEl = document.documentElement, clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 640) + ‘px‘; //此处可根据设计图可以改变数值 }; // 如果浏览器不支持addEventListener，则中止 if (document.addEventListener) { var resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘; window.addEventListener(resizeEvt, calculate_size, false); document.addEventListener(‘DOMContentLoaded‘, calculate_size, false); calculate_size(); }
方案三：
按照iphone6 750 的设计稿尺寸 用px 单位 缩小2倍的宽度布局，高度固定。750px = 375px。这是17年做移动端 常用的方式
方案四：
大神给的一个js 适配方案，动态创建meta 标签，动态改变 viewport 。单位是两倍 1px = 2px 。这种方案还在试用中
//添加viewport-mate标签缩放网页。 !function(userAgent) { if(userAgent.match(/AppleWebKit.*Mobile.*/)) { var screen_w = parseInt(window.screen.width), scale = screen_w / 750; if(/Android (\d+\.\d+)/.test(userAgent)) { var version = parseFloat(RegExp.$1); if(userAgent.indexOf("MX") > -1 && version >= 5) { //alert(userAgent) document.write(‘<meta name="viewport" content="width=750,minimum-scale = ‘ + scale + ‘, maximum-scale = ‘ + scale + ‘, target-densitydpi=device-dpi">‘); } else { document.write(version > 2.3 ? ‘<meta name="viewport" content="width=750, minimum-scale = ‘ + scale + ‘, maximum-scale = ‘ + scale + ‘, target-densitydpi=device-dpi">‘ : ‘<meta name="viewport" content="width=750, target-densitydpi=device-dpi">‘); }; } else { document.write(‘<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">‘); } } }(navigator.userAgent);
