H5常见问题以及解决

梦里梦外; 2023-07-04 03:27 40阅读 0赞

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

> 使用readonly属性

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

> 使用viewport 设置

三、表单的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'})
        })
    }