手机端小问题整理

Posted 2020-09-23 lytwajue

1,tap后会出现一个半透明的灰色背景。起初以为是outline作怪，加上后发现没反应。最后发现是tap后的背景高亮，要重设这个表现，则须要设置-webkit-tap-highlight-color为所需色彩。直接透明吧：a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}

2,另外，怎样去掉textarea,input的默认样式（ios上的圆角及内阴影等，android未測试）：input,textarea,a{-webkit-appearance:none;}

去除点击背景高亮：-webkit-tap-highlight-color: transparent;

3,手机端click有一秒延迟 很明显哦。。。

假设设置为tap/touchstart事件。click依旧会触发。看上去像点击穿透，须要stop阻止click事件触发。

4,禁止号码识别：<meta name="format-detection" content="telephone=no">

5,滚动栏出现后卡顿问题解决：-webkit-overflow-scrolling: touch; 

6，不同浏览器获取宽度不统一：document.body.clientWidth比較靠谱；window.innerWidth Safari中不正确。window.screen.width Android微信浏览器不正确。

7，多次点击绝对定位div移位问题：改动为fixed定位，可能导致其它div也须要设置为fixed。

见还有一篇《小技巧css解决移动端ios不兼容position:fixed》

8，微信长按图片须要等待5s以上出现保存图片弹窗，大多是由于图片太大。cdn加速就可以解决这个问题。

9，overflow:hidden 在iphone Safari下失效，可在设置的div里面新增一个div 设置position:relative；overflow:hidden就可以；

10。transform属性会渲染一个新的空间 导致fixed定位以设置为transform的div为基准。解决：1。fixed定位元素摘到transform元素外面；2。能够在动画运行完毕后js去掉该属性；z-Index也会失效。

11，flex布局在UC浏览器span标签需改成div才生效

手机端调试工具： weinre

手机端跳转到appstore下载app

html:

<div id="wechatTip" class="wechat-tip">
    <img src="/resource/images/tip.png" alt="在浏览器中打开">
</div>
css:

.wechat-tip {
    text-align: right;
    display: none;
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.8);
}
.wechat-tip img {
    max-width: 88%;
    margin-right: 1rem;
}

js

 $(document).on(‘click‘, ‘#download‘, function(event) {
        var  userAgent = navigator.userAgent.toLowerCase();
        if( /(micromessenger)/i.test(userAgent) ){
            event.preventDefault();
            $(‘#wechatTip‘).show();
        } else if (/(iphone|ipad|ipod|ios)/i.test(userAgent)){
            return;
        } else if (/(android)/i.test(userAgent)){
            event.preventDefault();
            window.location = "http://www.mioji.com/download/android/MiojiTravel_1_v1.1.0.apk";
        } else{
            event.preventDefault();
            alert("请用安卓或者苹果手机下载APP。");
        }
    });