移动端h5开发注意事项

移动端h5开发注意事项：

布局方面：

1.开发时小图片比较多，所以我使用绝对定位的次数比较多，绝对定位时尽量根据top进行定位，bottom定位在移动端下方出现时横条时，会让样式错乱。
2.布局方面我是用的是rem + 媒体查询
我看也有用写一段js脚本实现rem的，这种方式在一定条件很精准，但在屏幕很宽而长度很短时会有一点问题，比如ipad、在实验过程中iphone5也会有点偏差，所以在js中需要限制一下
我常用的是媒体查询，等有更好的方法会再分享：
如下，我通过计算使100px = 1rem
方便后续的书写

@media screen and (min-width: 320px) {
  html {
    font-size: 42.6667px;
  }
}

@media screen and (min-width: 360px) {
  html {
    font-size: 48px;
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 50px;
  }
}

@media screen and (min-width: 400px) {
  html {
    font-size: 53.3333px;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 55.2px;
  }
}

@media screen and (min-width: 440px) {
  html {
    font-size: 58.6667px;
  }
}

@media screen and (min-width: 480px) {
  html {
    font-size: 64px;
  }
}

@media screen and (min-width: 520px) {
  html {
    font-size: 69.3333px;
  }
}

@media screen and (min-width: 560px) {
  html {
    font-size: 74.6667px;
  }
}

@media screen and (min-width: 600px) {
  html {
    font-size: 80px;
  }
}

@media screen and (min-width: 640px) {
  html {
    font-size: 85.3333px;
  }
}

@media screen and (min-width: 680px) {
  html {
    font-size: 90.6666px;
  }
}

@media screen and (min-width: 720px) {
  html {
    font-size: 96px;
  }
}

@media screen and (min-width: 760px) {
  html {
    font-size: 101.3333px;
  }
}

@media screen and (min-width: 800px) {
  html {
    font-size: 106.6666px;
  }
}

@media screen and (min-width: 960px) {
  html {
    font-size: 128px;
  }
}

如果你不采用这样的换算，可以写一个css计算解决

Rem(a) {
  return (a / 100);
}

图片

为防止在不同的机型上失真，建议使用svg 否则最好是2x图

音频audio：

背景音乐直接使用audio属性

<audio id="bgMusic" loop="loop" src="https://fes.qyerstatic.com/Fqcb5tjVvk8gjQraFhqC2p_fDxLs" autoplay  preload="preload" data-url="https://fes.qyerstatic.com/Fqcb5tjVvk8gjQraFhqC2p_fDxLs"></audio>

在safari中，背景音乐不能直接播放，需要点一下才可以播放

网上的解决方案：https://www.cnblogs.com/wmhuang/p/5452259.html

如果想在一开始获取到audio的总时间值，可以使用canplay属性，在web端可以直接利用此属性获得总时间值（duration），但是h5中，默认音频为不加载，点击之后才会加载，触发canplay或者onload属性，为了获得准确的时间值，就不得不采取一点骚操作，即默认音频播放（autoplay），声音为静音（muted），在加载时的几毫秒之后在将此音频关掉：

<audio
        id="bgMusic"
        preload="metadata"
        @onload="canplay"
        autoplay="autoplay"
        @canplay="canplay"
        muted="muted"
        :src="voice_info[0].url"
        webkit-playsinline
        playsinline
        x5-playsinline
        ref="music">
 </audio>

视频

video

<video 
      id="video" 
      ref="video"
      controls="controls" 
      :src="video_info.url" 
      preload="metadata" 
      class="video"
      @canplay="canplay"
      webkit-playsinline = "true" 
      x5-playsinline 
      @ended="videoIsEnd"
      x5-video-player-type="h5"
      playsinline>
      您的浏览器不支持 video 标签
    </video>

如上，采取了一些兼容措施，在浏览器中取消托盘
预加载
使用了视频默认的控制器，可以不用，自定义一套控制器，通过调用相应的api

动画：

动画尽量使用transform实现位移，不要用top等，可以解决移动端的卡顿，优化渲染
translate3d，开启GPU硬件加速模式
例如：

.cloud_one {
  width: Rem(292) rem;
  height: Rem(198) rem;
  top: 3.65%;
  position: absolute;
  left: 69.06%;
  animation: cloud 2s infinite alternate;
}

@keyframes cloud {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, 6px, 0);
  }
}

旋转动画：

transform:transform 5s linear;
transition:rotate(50deg)

fixed定位与虚拟键盘冲突问题

移动端里 输入框input获取焦点得时，虚拟键盘会把fixed元素顶上去。
ios无此问题

可以判断一下机型，如果是andriod 检测当前窗口高度小与某个值是，使fixed的元素隐藏。

媒体查询解决：

@media (max-height: 400px) { 
  .footer {
    display: none;
  }

自动弹出软键盘

focus()
或者添加属性：autofocus=“autofocus”
ios系统限制，暂时没有找到方法，必须用户有所交互

禁止双指操作

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport">