首页 > 代码库 > 手机端小问题整理

手机端小问题整理

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="http://www.mamicode.com/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。");

        }

    });


手机端小问题整理