移动端兼容适配【持续记录】

• 软键盘导致页面形变
  1. 普通页面

     window.onload = function() {
     const html = document.getElementsByTagName('html')[0]
     html.style.minHeight = `${html.clientHeight}px`
     }

      

  2. 模态框【关键点是先让模态框的定位从fixed变为absolute，接着监听resize事件根据需要调整top参数】
• 虚拟控制栏隐藏或出现，底部栏设计方案【可以使用粘连布局】

<div>这里是content显示区域</div>
<div style="height: 130px"></div>
<div style="margin-bottom: -130px">这里是底部栏</div>

• 移动端滑动事件会阻塞setTimeout
  • 问题：若要在移动端中使用setTimeout做动画效果会有一个严重的问题，就是手指在屏幕中滑动时会阻塞setTimeout和setInterval
  • 解决方案：避免使用JS操控动画，可以合理使用SVG和animation组合制作动画