妙味H5交互篇备忘

 

document.addEventListener(
    'touchstart',
    function(e){
        e.preventDefault();
    }
);

在document上增加touchstart事件，可以阻止：

1、页面文字被选中 —— 如果希望文字被选中，可以阻止冒泡

2、页面上的系统菜单

3、可以清除掉系统默认的回弹(touchmove也可以)

产生的隐患：

1、滚动条失败 —— 需要模拟滚动

事件点透：

在a元素上层覆盖了div,点击div的时候，下方的a链接也被触发跳转到相应页面。

1. 在移动端 PC事件 有 300ms的延迟
2. 我们点击了页面之后，浏览器会记录点击下去的坐标
3. 300ms后，在该坐标找到现在在这的元素 执行事件

解决方法：

1、触止默认事件（部分安卓手机不支持）

2、不在移动端使用鼠标事件，不用a标签做页面跳转，采用location.href来跳转

防止误触：

设置一个开关，当touchmove的时候不允许跳转，touchend的时候才可以跳转

页面样式设置：

-webkit-text-size-adjust:100%    浏览器当进行横竖屏切换时，文字会有不同比例的缩放，设置100%后，文字会按照要求的大小显示， 不会自己去缩放。

a,

input,

button {

-webkit-tap-highlight-color:rgba(0,0,0,0);   清除默认的阴影

-webkit-appearance:none;   清除input，button在IOS下默认的圆角

}

移动端的字体：Helvetic

更改placeholder的样式：

input[type="text"}::-webkit-input-placeholder{}  //注意：这里必须是"::"号

贝塞尔曲线:

http://cubic-bezier.com/#0,0,0,1.5

cubic-bezier(0,0,0,1.5)  回弹动画

 Font Boosting 效应:

产生问题的原因：Chrome 在移动端为了优化体验，对于一些满足特殊条件，让 Chrome 认为字太小的时候，会让字体变大，以适应移动端显示

解决方法：

1、设置高度

　　2、若无法设置高度，则可以使用max-height:99999999px

 多棱柱计算公式

var browser = {
             versions: function () {
               var u = navigator.userAgent, app = navigator.appVersion;
               return {     //移动终端浏览器版本信息
                 trident: u.indexOf('Trident') > -1, //IE内核
                 presto: u.indexOf('Presto') > -1, //opera内核
                 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                 iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                 iPad: u.indexOf('iPad') > -1, //是否iPad
                 webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
               };
             }(),
             language: (navigator.browserLanguage || navigator.language).toLowerCase()
           }
           if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
               var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
               if (ua.match(/MicroMessenger/i) == "micromessenger") {
                   //在微信中打开
                  setInterval(WeixinJSBridge.call('closeWindow'),2000);
               }
               if (ua.match(/WeiBo/i) == "weibo") {
                   //在新浪微博客户端打开
               }
               if (ua.match(/QQ/i) == "qq") {
                   //在QQ空间打开
               }
               if (browser.versions.ios) {
                   //是否在IOS浏览器打开
               }
               if(browser.versions.android){
                   //是否在安卓浏览器打开
               }
           } else {
               //否则就是PC浏览器打开
               window.close();
           }

　　

-webkit-overflow-scrolling:touch;