WAP端经验记录2

最新推荐文章于 2024-05-29 00:04:25 发布

weixin_34067980

最新推荐文章于 2024-05-29 00:04:25 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/zhengming2016/p/5551547.html

版权

1. LightboxV2 插件

点击A 应该关闭弹层的效果，但是 SAMSUNG 手机上原生浏览器上，看上去不会关闭却跳转了，但当点击回退按钮的时候就会看见弹层已经消失(其实之前的关闭效果已经记录了)
UC浏览器上点击A 能看到弹层关闭，因为它的click事件只比 touchend事件慢了一点点

IOS7.0 能看到弹层关闭再跳转，IOS8.0看不到弹层关闭再跳转，但是当回退的时候都是关闭的

2. chrome 中文版下不能设置字体小于 12px, 但是可以用如下的属性去让它缩放
-webkit-transform: scale(0.775384615384615);

3.
safari ios8 下不支持 new Date('1440666951116')
但是可以 new Date(1440666951116) 或 new Date(2015,8,12,10,10,40)

IE8 支持写法 new Date(1440666951116) 或 new Date(2015,8,12,10,10,40)

4.
当一个元素用了 -webkit-transform: rotate(20deg); 它的层级z-index在某些浏览器下会很高，用下面的属性让其他元素层级比它高。

-webkit-transform: translateZ(0);
-webkit-transform: rotateX(0);

5. uglifyjs 压缩代码
cd D:\Users\zhengming\Desktop
uglifyjs lightbox_v2.js -m -o lightbox_v2.min.js // 混淆压缩
uglifyjs lightbox_v2.js -o lightbox_v2.min.js // 普通压缩

7. 如何居中

position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);

这个在某些手机(vivo) 默认浏览器没有问题，但内嵌的APP里面 -webkit-transform: translate(-50%, -50%); 不起作用。

修复的办法就是改成 position: absolute;

8. zepto-1.1.6.js
Zepto(document).height() 如果没有内容会是0,

　　Zepto里代码为: document.documentElement.scrollHeight，所以得改成

　　Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

Zepto(window).width() 没有去掉浏览器滚动条的宽度

　　所以若是PC取宽度代码（参考 jquery-1.11.3.js）： document.documentElement["clientWidth"]
Zepto(window).height() 没有去掉浏览器滚动条的宽度

　　所以若是PC取宽度代码（参考 jquery-1.11.3.js）： document.documentElement["clientHeight"]

9. userAgent
iphone6 plus
"Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4"

小米
mozilla/5.0(linux; u; android4.1.1; zh-cn; mi 2 build/jro03l)applewebkit/534.30(khtml, like gecko)version/4.0 mobile safari/534.30
xiaomi/miuibrowser/1.0

10. 判断是否 pad 设备

// 判断是否 是pad 设备
!function(){
    window.GM || (window.GM = {});
    GM.isHandDevice = 'ontouchend' in document; // 判断是否手持设备
    !function(){
        //判断当前设备是否为ios系统
        var userAgent = navigator.userAgent.toLowerCase();

        var device; // 设备
        if(userAgent){
            switch(true){
                case (/ipad|iphone|mac/i).test(userAgent):
                    // ios 设备
                    device = 'ios';
                    break;
            }
        }

        if(device === 'ios'){
            GM.isDeviceIOS = true;
        }
    }();

    if(GM.isHandDevice){
        var userAgent = navigator.userAgent.toLowerCase();
        var isIpad = userAgent.indexOf('ipad') > -1;
        var isMobile = userAgent.indexOf('mobile') > -1;
        var isUC = userAgent.indexOf('ucbrowser') > -1;
        var isSogou = userAgent.indexOf('sogou') > -1;

        var deviceWidth = window.screen.width;
        var deviceHeight = window.screen.height;
        var temp;
        // 若是pad 横过来了, 则值对换下
        if(deviceWidth > deviceHeight){
            temp = deviceWidth;
            deviceWidth = deviceHeight;
            deviceHeight = temp;
        }

        // 若当前不是 IOS设备, 并且是UC浏览器或搜狗, 并且 devicePixelRatio 有值
        if( !GM.isDeviceIOS && (isUC || isSogou) && window.devicePixelRatio > 1 ){
            deviceWidth = deviceWidth / window.devicePixelRatio;
        }

        var isPad;
        if(isIpad || deviceWidth > 500){
            isPad = true;
        }else{
            if(isMobile){
                isPad = false;
            }else{
                isPad = true;
            }
        }


        // 带有ipad标识 或设备的宽度大于500
        if(isPad){
            GM.isDevicePad = true;
        }else{
            GM.isDeviceMobile = true;
        }
    }
}();

11. 是否由trigger触发, 而不是用户手动点击触发。

var isTrigger = function(e){
  // 默认 false, 不是由 trigger触发
  var flag = false;
  
  if(e){
    /*
        e.originalEvent 存在说明是用jQuery 绑定的事件,
        把e变成NativeEvent
        code copy from jquery mobile
    */
    while ( e && typeof e.originalEvent !== "undefined" ) {
        e = e.originalEvent;
    }
    /*
        是否有手机端的事件 changedTouches,
        或 点击的位置区域是否大于0
        3个都为 undefined, 取反为true, 为trigger触发
    */
    flag = !( e.changedTouches || e.clientX > 0 || e.clientY > 0 );
  }
  
  return flag;
}

12.

font-size: 100px;(大于66px 都会)

会把元素是 display: inline-block; 的外面包裹的元素的高度变大，

所以修改外层包括元素的 font-size: 12px;

直接 body 上加个 font-size: 12px 最好

13. 判断是否正整数。由于 Number 和 parseInt 都不能准备判断字符串是否为正整数，所以还是得用正则判断。

Number('22a'); // NaN
parseInt('22a'); // 22

Number(''); // 0
parseInt('') ; // NaN

var isPosInteger = (function(){
    var reg = /^[1-9]\d*$/;
    return function(val){
      var valid = !isNaN(val) && reg.test(val);
      return valid;
    }
})();

14.

　　1) 谷歌亲儿子连接VPN的时候自动播放音乐会触发错误，说是 "不能触发错误", 所以不要 bg.play() 自动播放背景音乐。

　　2) <meta name="format-detection" content="telephone=no"> 可以让电话号码不要以格式化的形式存在

　　3) 用户点击的时候不会有高亮的效果: -webkit-tap-highlight-color: rgba(0,0,0,0);

　　4) 防止用户点击选中它: -webkit-user-select:none; //-moz-, -ms-, -webkit-;

　　　 input 不能加这个属性，因为这样会让 input 框不能输入任何字符, body 上可以加这个属性，这样页面上的文字都不可以选中，却不会影响到 input 框。

　　5) box-sizing: border-box, 意思是 width 包括 padding。特别是这种情况:

width: 100%;
padding-left: 100px;
-webkit-box-sizing: border-box;
box-sizing: border-box;

　　6) H5页面调用native的方法bindCard的时候, 若 native那边的 bindCard函数有定义2个参数 (string, callback), 那么H5必须传递两个字符串(可以为空的字符串)，否则会调用不成功。

　　　失败: window.Native.bindCard()

　　　成功: window.Native.bindCard('', '')

15. 最大的宽度 max-width 不要加在 table 上，加在 table 里面的 td 里的div 上

<table style='max-width: 20px;'>
    <tr>
      <td></td>
    </tr>
</table>

<table>
    <tr>
      <td>
        <div style='max-width: 20px;'></div>
      </td>
    </tr>
</table>