H5常见问题以及解决

一、点击输入框之后禁止软键盘弹出

使用readonly属性

二、使用日期选择器之后弹出使页面撑大的解决办法

使用viewport 设置

    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1">

三、表单的label和input文字不能对齐

检查行高，设置为一样的高度
布局设置为flex出错概论比较小

四、tab吸顶的书写

使用position：sticky

有两个注意事项:

1.须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

        并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。

2.设定为position:sticky元素的任意父节点的 overflow 属性必须是 visible，否则position:sticky不会生效。这里需要解释一下：

        如果position:sticky元素的任意父节点定位设置为overflow:hidden，则父容器无法进行滚动，所以position:sticky元素也不会有滚动然后固定的情况。

        如果position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

五、/禁止ios和android用户选中文字

html,body {-webkit-user-select:none; user-select: none; }

六、横竖屏适配

```javascript
//JS处理
function orientInit(){
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
    if(orientChk =='lapdscape'){
        //这里是横屏下需要执行的事件
    }else{
        //这里是竖屏下需要执行的事件
    }
}
 
orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
    setTimeout(orientInit, 100);
},false)    
 
//CSS处理
//竖屏时样式
@media all and (orientation:portrait){   }
//横屏时样式
@media all and (orientation:landscape){   }

七、定位问题

//fixed定位
//1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
//2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
//3.ios4下不支持position:fixed
//解决方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如：
<div id="wrapper">
        <ul>
               <li></li>
               .....
        </ul>
</div>
<script src="iscroll.js"></script>
<script>
    var myscroll;
    function loaded(){
        myscroll=new iScroll("wrapper");
    }
    window.addEventListener("DOMContentLoaded",loaded,false);
</script>
 
 
//position定位
//Android下弹出软键盘弹出时，影响absolute元素定位
//解决方案:
var ua = navigator.userAgent.indexOf('Android');
if(ua>-1){
    $('.ipt').on('focus', function(){
        $('.css').css({'visibility':'hidden'})
    }).on('blur', function(){
        $('.css').css({'visibility':'visible'})
    })
}