[前端开发] 移动端工作笔记

移动端适配

安装依赖

npm install postcss autoprefixer poscss-pxtorem -D

新建postcss.js文件

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7'],
    },
    'postcss-pxtorem': {
      // 根节点的 fontSize 值
      rootValue: 16,
      propList: ['*'],
    },
  },
}

const rootValue = 16
const rootWidth = 390
const deviceWidth = document.documentElement.clientWidth
document.documentElement.style.fontSize = (deviceWidth * rootValue) / rootWidth + 'px'

移动端css问题汇总

html{
#禁止文本缩放
   -webkit-text-size-adjust: 100%;
 // 字体抗锯齿，让字体看起来更清晰 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   user-select: none; /* 禁止长按选择文字 */
  //禁止字体调整 旋转屏幕可能会改变字体大小，声明text-size-adjust:100%让字体大小保持不变
   text-size-adjust: 100%;
//禁止高亮显示 触摸元素会出现半透明灰色遮罩，不想要
-webkit-tap-highlight-color: transparent;

}
button,
input,
select,
textarea {
   //美化表单外观 表单元素样式太丑希望自定义，appearance:none来帮你
    appearance: none;
}
//美化输入占位 输入框占位文本
input::-webkit-input-placeholder {
    color: #66f;
}
input,
textarea {
   //声明user-select:none会让<input>和<textarea>无法输入文本
    user-select: auto;
}
//去除圆角
button,input{
    -webkit-appearance:none;
    border-radius: 0;
}

//IOS系统中，链接、按钮等点击会有灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}

移动端常用配置

#删除默认的苹果工具栏和菜单栏，默认为no
<meta name="apple-mobile-web-app-capable" content="yes" /> 
#启用webApp全屏模式
<meta name="apple-touch-fullscreen" content="yes" /> 
#优先启用最新版本IE和chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
#添加到主屏后的APP图标114*114
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">

移动端交互问题

300ms延迟
如何解决移动端Click事件300ms延迟的问题？
滚动穿透，页面弹窗滚动，会造成底部内容区域也滚动

body{
    position:fixed;
    width:100%;
}

在移动端h5页面,当页面中包含input、textarea输入框的时候，或者有调起软键盘的操作时，安卓浏览器下，可视窗口的高度改变，导致页面上的vh重新计算，页面被压扁，safari没有这个问题。
解决方案：一进入页面就获取浏览器可视区的高度，然后把高度赋给根元素 https://blog.csdn.net/w001yy/article/details/108777106

var initViewport = function(height){
    var metaEl = document.querySelector("#viewportMeta");
    var content = "height=" + height + ",width=device-width,initial-scale=1.0,user-scalable=no";
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', content);
}
var realHeight = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight
initViewport(realHeight);

页面底部footer标签是fixed定位，输入法键盘弹出导致页面底部按钮上浮

移动端H5软键盘的大坑及其解决方案