移动端那些年我曾经踩过的坑

            以前开发移动端的时候，遇到过许许多多奇葩的问题，也踩过不少的坑，今天将那些年曾经踩过的坑小结一下，以免日后再次入坑！！！

           

          1、在移动端开发过程中，ios下添加图片或者空的div,会有黑色的阴影，可以用css属性去除

-webkit-tap-highlight-color:rgba(255,255,255,0)

   

          2、硬件加速

在使用css变化和过渡效果时，支持硬件加速的浏览器会开启该功能，可以通过将一个元素移入3D空间这种瞒天过海的手段迫使浏览器对该元素使用硬件加速：
...{
    -webkit-transform-style: preserv-3d;
}

           3、在开发移动端项目时，按钮可以相对于页面的变化而变化，这种方式最大的好处是不需要媒体查询来适配

margin-top、margin-left

          4、一定要注意链接的大小，因为大多是触屏手机，要让用户很方便的能点击到标签

操作对象的大小符合手指的操作，按键的大小设置规范：

食指点击的间距 约为7*7 mm， 1mm间距，

拇指点击8*8 mm，2mm间距。当前推荐的值为9mm 大小，最小应不小于7mm。

当然一些重要操作，或者频繁点击的区域可以设置的略微更大一些。

         5、禁止链接长按弹出选项菜单

-webkit-touch-callout:none;

         6、禁止保存或拷贝图像（IOS）

img { -webkit-touch-callout: none; }

         7、移动端禁止选中内容

.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移动端不需要） */
  -ms-user-select: none;      /* IE 10+ */      
}

        8、清除输入框内阴影

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

       9、禁止文本缩放

html {
　　-webkit-text-size-adjust: 100%;
}

        10、关闭iOS输入自动修正

<input type="text" autocorrect="off" />

        11、关闭iOS键盘首字母自动大写

<input type="text" autocapitalize="off" />

        12、添加微信扫一扫提示

第一种方法：
 // 对浏览器的UserAgent进行正则匹配，不含有微信独有标识的则为其他浏览器
    var useragent = navigator.userAgent;
    if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
        window.location.href="https://open.weixin.qq.com/connect/oauth2/
authorize?appid=wx073e54514fd7705a&redirect_uri=http%3A%2F%2Fmoet.6edigital.cn%2Fbirthday%2Fweixin%2Fuser&
response_type=code&scope=snsapi_userinfo&state=&connect_redirect=1#wechat_redirect";
    }

第二种方法：

  <script src="//wximg.qq.com/wxp/libs/wxmoment/0.0.4/wxmoment.min.js"></script>
 
  $(function(){
        //添加横屏提示
        new WxMoment.OrientationTip();
    })