移动端调试布局以及常见的问题解析

Posted 2020-10-27 鱼樱、、

rem原理与简介：
依据html根元素大小定，px转rem动态调整根元素font-size大小；
1rem = 16px; html的字体大小就是可以默认为浏览器的字体大小；

移动端适配：方式一
媒体查询@media

@media screen and （max-width:320px）{
  html{
    font-size:20px;
  }
}

@media screen and （max-width:360px）and(min-width:321px){
  html{
    font-size:20px;
  }
}
....................写完主要机型的屏幕大小；
----------------------------------------------------------------------------------------------
方式二
采用js去设置font-size；
let docW = document.documentElement.clientWidth || document.body.clientWidth;//视窗宽度
let docH = document.getElementsByTagName("html")[0]; 
docH.style.fontSize = docW/10 + "px";

window.addEventListener("resize",(e)=>{
   let docW = document.documentElement.clientWidth || document.body.clientWidth;//视窗宽度
   docH.style.fontSize = docW/10 + "px";
})

sass函数结合使用rem；
@function px2rem($px){
   $rem:37.5
   @return ($px / $rem)+ rem;
}

调用：
width:px2rem(100px);
去除移动端布局出现横向滚动条box-sizing:border-box;

vue使用sass语法需要安装:sass、 sass-loader、 node-sass -D在开发环境；
webpack(config/index.js文件内的 productionSourceMap改为false,这样打包出来的文件可以没有.map结尾的js文件，且文件体积减少至少一半)
/*在index.html上引入判断是pc还是移动端打开*/
<link rel="shortcut icon" href="./static/img/favicon.png"> //网页title角标图片
<div id="app"></div>
  <div id="ismobile"><img src="./static/img/github.png"  />
    <p>请在移动端打开，并刷新页面。</p>
  </div>
<script>
browserRedirect();
function browserRedirect() {
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  var bIsandroid = sUserAgent.match(/android/i) == "android";
  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    document.getElementById(‘ismobile‘).style.display = "none";
    document.getElementById(‘app‘).style.display = "block";
  } else {
    document.getElementById(‘ismobile‘).style.display = "block";
    document.getElementById(‘app‘).style.display = "none";
  }
};
</script>
<style>
  #ismobile {
    display: none;
    font-size: .6rem;
    text-align: center;
    padding-top: 4rem;
  }
 </style>
mock.js(模拟后台数据)
vue-touch(手势判断)
//移动端调试工具，在移动端输出日志
import vConsole from ‘vconsole‘
// console.log(‘Hello world‘)
Eruda移动端调试神器；
cnpm install eruda --save
eruda.init()
判断ios还是安卓设备；
var u = navigator.userAgent;
var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1 //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端