移动端开发问题总结

2020-09-23

做了有两年的移动端，其中也遇到各种各样的问题，想着专门写一篇博客做个收集，也便于以后查找

h5

方法一，touch-action

方法二，禁止touchmove事件

window.addEventListener('touchmove', function (e) {
  e.stopPropagation()
  e.preventDefault();
}, { passive: false })

加上accept=”image/*”

解决方法
在对应的blur事件加如下代码，注意，如果此方法无效，还需要在对应的父元素加scroll方法（一般应该是最外层的父元素）

1
2
3

setTimeout(function(){
    window.scrollTo(0, 0)
},100)

（需测试）

toBlob在微信h5无法保存，本机浏览器可以，toDataURL可以。
小程序webview用toBlob有成功过的案例，同时用toDataURL部分机型失败

ios的input默认有border-radius和-webkit-appearance样式，用border-radius: none和-webkit-appearance: none清除
ios中input的disabled模式，整体颜色会变浅，如果需要保持原样式使用readOnly属性更好

ios中图片默认可以选中，文字可以复制，并且点击一个链接或者通过Javascript定义的可点击元素时，会出现一个半透明的灰色背景

div, img {
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0); // 改变半透明背景颜色
  point-events: none; // 完全禁止
}

安卓触发touchcancel事件，ios触发touchend事件

设置font-size: 0;或者设置image的display为flex

在某些机型可能出现问题，使用重要数据时要仔细验证

小程序默认加上更新代码，以免更新小程序时有缓存

Date.parse(new Date('2020-09-24 12:00:00'))
这行代码在安卓下输出1522382400000，在ios下输出NaN，ios中要用YYYY/MM/DD的形式，通用代码：

1
2
3

function formatTimeStamp (time) {
  return Date.parse(new Date('2018/03/30 12:00:00')) || Date.parse(new Date('2018-03-30 12:00:00'))
}

微信最短屏750_1126，今日头条最短屏：750_1096