手机端小问题整理

关于手机分辨率：物理独立像素为手机真实像素。物理像素为手机宽度(media根据这个判断)。设备像素比为物理独立像素除以物理像素。不同手机设备像素（window.devicePixelRatio）比不同，iphone5，6 dpr=2，iphone 6s dpr=3，大于1为高清屏。电脑retina屏dpr=2。

物理像素ipone5 320*568、iphone6 375*667、iphone6s 414*736。

css中1px对应几物理像素跟布局视口（viewport）和物理独立像素相关。1px=物理独立像素/viewport

viewport是浏览器厂商提供值，介于768-1024之间常用980px;移动端需要设置viewport=device-width（物理像素）配合initial-scale使用。1px=物理独立像素/viewport=devicewidth*dpr/devicewidth=dpr个物理像素。看起来比较粗。具体适配请参考：传送门

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；或者手机连接电脑，chrome浏览器打开chrome://inspect/#devices；http://www.cnblogs.com/xy-nb/p/web.html

手机端跳转到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。");
        }
    });