手機端小問題整理

標籤：down   roi   解決   window   z-index   size   pos   長按   wechat   

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。");
        }
    });

手機端小問題整理