web移动端开发-遇到的系列问题

（安卓）Audio标签播放问题

     描述问题： 移动端 使用audio.play() 方法，在安卓上不会播放。

     iphone支持 ontouchstart事件，android视为不安全，不支持。

     解决方案： 1. 采用onclick~  两者都支持。

                       2. 判断iphone和android，用不同的触发事件。

 

（安卓）长按按钮，会导致变灰色（在微信浏览器上）

    解决方案： 移除安卓端的ontouchstart事件

let u = window.navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android
if (isAndroid) {
    document.getElementById('booking-btn').addEventListener('touchstart', this.state.touchEvent, false);
}

 

（IOS）单页应用 路由不变化

    Iphone使用location.href跳转（临时方案）

 

（IOS/Android）单页应用 实现标题切换

    封装方法：

const titleUtil = {};

titleUtil.setTitle = (title) => {
    if(!title){
       title = 'BuzzBuzz';
    }
    document.title = title;
    let ua = navigator.userAgent;
    if (/\bMicroMessenger\/([\d.]+)/.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
        var i = document.createElement('iframe');
        i.src = '/favicon.ico';
        i.style.display = 'none';
        i.onload = () => {
            setTimeout(() => {
                i.remove();
            }, 9);
        };
        document.body.appendChild(i);
    }
};

export default titleUtil;

 

 0.5px细线的实现

   使用css3的转换

.line-middle{
    position: relative;
}

.line-middle:after{
    content: '';
    position: absolute;
    width: 200%;
    height: 1px;
    z-index: 20;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid  #dfdfe4;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(.5,.5);
    transform: scale(.5,.5);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

IOS中  键盘的弹起

ios中，键盘的弹起，页面会往上挪动，使输入框展示在页面中间，键盘隐藏页面会下挪恢复原状

在6.7.4版本中，不会回挪，这将导致有相对定位（fixed,absolute:相对于浏览器窗体）的节点发生位移，导致节点点击事件偏移而无法选中

if(isiOS){
    document.activeElement.scrollIntoViewIfNeeded(true);
}

https://blog.youkuaiyun.com/m0_37520980/article/details/86305488

移动端按压效果

 

  ontouchstart添加浮层   ontouchend移除浮层 并 触发onClick事件（注意，不要绑定onClick事件，某些手机中浮层会出现bug，在touchend结束时触发即可）