h5项目在Android / ios中的常见问题总结

1、在ios上光标显示过长的问题

方案1

不要给input 设置高度，用padding撑开

方案二

更改 input 的 line-height 值，让值变小些

2、ios/android在浏览器中上下滑动一闪一闪（回弹效果）

activated() {
  <!--禁止回弹-->
  document.addEventListener('touchmove', this.evt, {passive: false})
},
deactivated() {
  <!--启用回弹-->
  document.removeEventListener('touchmove', this.evt, false)
},
methods: {
    evt(e) {
      e.preventDefault()
    },
}

注意： vue中禁止回弹效果后可能会对其他页面滑动有影响，需在离开页面的时候启用回弹效果

3、display: flex 遇到white-space: nowrap;

当父级为flex布局，某一子元素超出文字需要隐藏的情况下，会导致另一元素出现被压扁的现象。

<div class="items flex">
    <div class="items-img"><img src="img.jpg" /></div>
    <div class="items-content">
        <h3>我是很多很多的文字很多很多很多很多哦把我假想成文字吧。</h3>
        <div class="text">我是个描述</div>
    </div>
</div>
.items-content{
  min-width: 0;
  .text{
    width:100%;
  }
}

4、让标点符号不出现在行首

word-break:break-all;这条语句的作用是让语句到达边界的时候自动换行，但是正是这个样式让标点符号跑到了行首。

要想标点符号不出现在行首，又能实现自动换行，只需要将样式写成如下：

word-break : normal;

5、解决ios短信验证码自动填充两遍的问题

这是苹果系统的一个bug，可以通过监听input，然后截取。
maxlength 失效也可以用此方法

<input type="number" οninput="if(value.length>6) value=value.slice(0,6)"/>

6、h5图片上传，IOS图片会出现旋转

<input type="file" accept="image/jpg" @change="upload"/>

import { EXIF } from 'exif-js'
...
methods: {
  upload(e) {
     let file = e.target.files[0];
     this.fileImage(file)
  },
  fileImage(file) {
    // 处理ios下图片旋转的问题
    if (!file || !window.FileReader) return false;
    // 获取照片方向角属性，用户旋转控制
    EXIF.getData(file, function() {
        EXIF.getAllTags(this);
        Orientation = EXIF.getTag(this, 'Orientation');
    })
    let oReader = new FileReader(); // 创建一个reader
    oReader.onload = function(e) {
        var image = new Image()
         image.src = e.target.result
         image.onload = function() {
            var expectWidth = this.naturalWidth
            var expectHeight = this.naturalHeight
            if (this.naturalWidth > this.naturalHeight &&this.naturalWidth > 800) {
                expectWidth = 800
                expectHeight =(expectWidth * this.naturalHeight) / this.naturalWidth
            } else if (this.naturalHeight > this.naturalWidth &&this.naturalHeight > 1200) {
                expectHeight = 1200
                expectWidth =(expectHeight * this.naturalWidth) / this.naturalHeight
            }
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            canvas.width = expectWidth
            canvas.height = expectHeight
            ctx.drawImage(this, 0, 0, expectWidth, expectHeight)
            var base64 = null
            // 如果方向角不为1，都需要进行旋转
            if (Orientation !== '' && Orientation !== 1) {
              switch (Orientation) {
                 case 6: // 顺时针90度
                    that.rotateImg(this, 'left', canvas)
                    break
                 case 8: // 逆时针90度
                    that.rotateImg(this, 'right', canvas)
                    break
                  case 3: // 180度旋转
                     that.rotateImg(this, 'right', canvas) // 转两次
                     that.rotateImg(this, 'right', canvas)
                     break
                   }
               }
               base64 = canvas.toDataURL('image/jpeg', 0.8)
               that.uploadImg2().then(data => {
                  that.loadingDial.hide()
               })
            }
      }
      oReader.readAsDataURL(file)
  }
}