美文网首页工作总结
移动端 安卓:1像素边框、input 白色背景、底部按钮posi

移动端 安卓:1像素边框、input 白色背景、底部按钮posi

作者: 轩轩小王子 | 来源:发表于2019-02-16 18:21 被阅读0次

1.Q:安卓机上1像素边框问题

A:引入一个border.css(如有需要可以私聊我)

2.Q:安卓机上input 会有白色背景

A:

input{

    background-color:transparent;

    -webkit-appearance:none;

 FILTER: alpha(opacity=0); /*androd 去掉白色背景*/

}

3.Q:微信6.7.4 ios12软键盘顶起页面后隐藏不回弹

A:

export function blurAdjust( e ){

    setTimeout(()=>{

        if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){

            return

        }

        let result = 'pc';

        if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS

            result = 'ios'

        }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android

            result = 'android'

        }

        if( result = 'ios' ){

            document.activeElement.scrollIntoViewIfNeeded(true);

        }

    },400)

}

4.Q: android 底部按钮position:fixed,点击input框时位置会上移

A:

mounted(){ 

        //监听窗口改变

        var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;

        let that = this

        window.onresize = function temp() { //ios 软键盘弹起不会触发这个事件

            var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

            if(resizeHeight-0<originalHeight-0){

                    that.btnShow = false; // 或者position:static

                }else{

                    that.btnShow = true; // 或者position:fixed

                }

        };

    }

5.Q:h5 手机号点击 可以打电话

A:

<a 
  :href="'tel:'+item" 
  class="telBox" 
  target="_blank" 
  v-for="item of cinemaDeatail.tel" 
  :key="item.id"
>
       {{item}}&emsp;
</a>

相关文章

网友评论

    本文标题:移动端 安卓:1像素边框、input 白色背景、底部按钮posi

    本文链接:https://www.haomeiwen.com/subject/esdieqtx.html