移動端調試、布局以及常見的問題解析

標籤：none   ref   doc   調整   install   direct   function   get   name   

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 --saveeruda.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終端

 

移動端調試、布局以及常見的問題解析