Web前端填坑记录(持续更新)

1:android上 如果内容超出容器，overflow-x 无效，必须将容器设置成fixed才行

2:android 上可滑动的区域，在ios上不一定好用，有时无法滑动，添加一下-webkit-overflow-scrolling:'touch'试试看，会有不一样的效果

3:ios上 如果有input聚焦时候，用户如果使用的不是原生输入法，则input不会自动聚焦滚动

 

4:chrome调试webview的话，需要在安卓代码加入

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

      WebView.setWebContentsDebuggingEnabled(true);

 这样才能保证全部手机可调式

 

5.ios下 input聚焦时，input被虚拟键盘挡住的解决方法：

在input聚焦的时候，监听windw的resize事件，在resize中延迟修正scrollTop即可，如：

common.resizeForInput = function (scrollHeight) {
    console.log('----------------common.resizeForInput-------------------');
    var deferTime = 500;
    setTimeout(function () {
        var nainfo = $.ajaxSettings.data;
        if (nainfo['os'] === 'android') {
            console.log('android');
        } else {
            console.log('ios');
            console.log(document.body.scrollTop);
            if (document.body.scrollTop < 200) {
                document.body.scrollTop = scrollHeight;
            }
        }
    }, deferTime);

 }

6.使用iscroll的时候input 输入文字过长，造成闪屏的问题，是由于iscroll中的input在输入完成后，焦点没有blur，解决方法是：在input的onBlur事件中加入 document.activeElement.blur()

7.android 4.3以下布局有异常的时候，看看box布局加到容器上没，并且 元素的flex到底设置了没

8.iscroll 在android 4.4以下 click事件有问题，点击一次会执行两次，对应方法就是判断设备和版本

// 安卓4.4以下版本 iscroll click会执行2次
function iScrollClick() {
    var myUserAgent = navigator.userAgent;
    // 安卓机器
    if (myUserAgent !== null||myUserAgent !== 'undefined') {
        if (myUserAgent.indexOf('Android') !== -1) {
            var s = myUserAgent.substr(navigator.userAgent.indexOf('Android') + 8, 3);
            var osversion = parseFloat(s[0] + s[2]);
            if (osversion < 44) {
                return false;
            } else {
                return true;
            }
           
        } else {
            return true;
        }
    } else {
        return true;
    }
}

9.react中如果使用复合组件，比如var att=[]; att.push(<span>Hello</span>);tt.push(<span>world</span>)

render(return <div>{att}</div>) 这种时候，都要加上key属性，优化react diff性能

att.push(<span key=“1">Hello</span>);tt.push(<span key=“2">world</span>)

10.如果要计算一个字符串的长度，可以新建立一个隐藏的span标签，然后将文字加进去，最后得到span的宽度就ok了

11.在android 4.4中 如果页面中存在input 点击后弹出键盘之后，输入内容关闭键盘后，页面上方存在白条，是因为页面高度问题

12.要使用Object.assign()等es6方法，光用babel的core还是不信的，需要添加对应的plugins

npm install babel-plugin-transform-object-assign

"plugins": ["transform-object-assign"]

13.react-router中 如果使用了hashHistory，则render函数会执行两次，如果使用ReactCssTransitionGrpup进行动画切换，就要使用browserHistory，不然切换动画时，会clone两次

14. 如何实现数据的绑定，比如Object.observe

15.WebP格式图片比JPEG平均小25%

16.document.getElementByClassName 在IE8以及以下是不支持的，使用时候需要注意，如果不支持，可以配合 document.getElementByTagName(‘*’) 获取全部元素，在循环变量className是否相等的方法重写

17.触摸反馈，比如按钮押下效果，目前三种实现方式

a：可以使用:active 伪类实现，缺点是ios支持不好，需要在body上添加touchstart空事件作为处理，有延迟

b：可以在外层包装一个a标签，并用-webkit-tap-highlight-color这个属性修改，但只能改颜色和透明度效果

c：可以在事件中addClass和removeClass实现，略微麻烦，但效果最好

另外可以使用一个库：https://github.com/backToNature/touchFeedback/blob/master/doc/zh-cn.md

18.以下事件不冒泡：blur、focus、load、unload。

19.IOS8 fixed布局没用

20.postcss befor和after 不能自动添加前缀

21.最新版本的postcss中 webkit-flex 被删除了，在webpack中如下配置

postcss: [
    autoprefixer({
        browsers: [
            'last 2 versions',
            'iOS >= 8',
            'Safari >= 8',
            'Android > 4.1',
        ]
    })
],

22.android的webview中，line-height的垂直居中 对于字体小于12px的无效，主要是因为避免奇数font-size带来的偏差，设置成了偶数，所有会有一些偏上

解决办法：

1. 改变字体大小 最直接的方法就是改变字体大小让它大于 12px 能够正常居中，如果页面对字体大小要求比较严格的话，可以先将原来包括 font-size 在内的属性放大两倍，再用 scale 缩小一倍，这样测试之后也是可行的：

<span class="content”>jasonjin</span>

.content {
    display: inline-block;
    height: 40px;
    background-color: gray;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0% 0%;
}

2. table布局 在元素外再包一层，使用表格布局

<div class="container">
    <span class="content">testtesttesttesttest</span>
</div>

.container {
    display: table;
}
.content {
    background-color: gray;
    font-size: 10px;
    display: table-cell;
    vertical-align: middle;
}