h5页面在iOS上的问题解决

超、凢脫俗 2023-08-17 17:33 158阅读 0赞

1、ios移动端 软键盘收起后，页面内容被顶上去，不下滑回原处

代码如下：

$(function(){
            $('input,textarea').on('blur',function(){
                window.scroll(0,0);
            });
            $('select').on('change',function(){
                window.scroll(0,0);
            });
     })

原理就是弹起键盘的时候，window.scrollY会从0变到键盘的高度（例如：200），当输入框焦点失去后让scrollY回到0就好了。

但是有一个很严重的问题：如果页面上有按钮需要操作 ，例如，评论的输入框+发布按钮，输入完文字，点击“发布”，触发click事件的时候，会导致页面先触发blur事件，键盘回落，然后一切就结束了。。。。按钮点击没有起任何作用。

解决方案： 把click事件更换成ontouchstart 可以解决这个问题。 ontouchstart 事件优于click事件触发。

2、移动端 input,按钮等样式在安卓与ios上不同的解决方案

input,select,button{
    　　-webkit-appearance:none;
    　　appearance:none;
    }

去掉 IOS默认样式即可

3、IOS上下拉动滚动条时卡顿、慢

body {
    
     -webkit-overflow-scrolling: touch;
     overflow-scrolling: touch;
    
    }

4、ios页面拖动问题

body {
    /* 当手指从触摸屏上移开，滚动会立即停止 */
     -webkit-overflow-scrolling: auto
     overflow-scrolling: auto
    }

5、iphone及ipad下输入框默认内阴影

-webkit-appearance: none;

6、日期问题

对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别。

时间格式化的时候，在浏览器端处理好好的，到了手机端，就变成NAN，或者null，这种情况，是ios系统不能转化这种类型的时间。

let date = new Date('2019-02-28 18:33:24');    // null

解决方案：转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了。

replace(/-/g, "/")

7、ios在微信小程序的webview，键盘收回，页面底部会留白

这个问题怀疑是页面的scroll设置了auto导致的。

#### 解决思路： ####

复现该bug以后发现只要滚动一下页面就可以使页面恢复正常，于是就想可不可以在input失去焦点以后调用一下页面滚动，来完成该操作，发现果然可以。然后就产生了如下代码![复制代码][copycode.gif]

temporaryRepair(){
        var currentPosition,timer;
        var speed=1;//页面滚动距离
        timer=setInterval(function(){
            currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
            currentPosition-=speed; 
            window.scrollTo(0,currentPosition);//页面向上滚动
            currentPosition+=speed; //speed变量
            window.scrollTo(0,currentPosition);//页面向下滚动
            clearInterval(timer);
        },1);
    }

8、iphone fixed 失效，导致一些机器上textarea光标偏移

解决方案： 所有兄弟元素变成absolute， 父元素overflow:auto。![复制代码][copycode.gif]

父元素{
    height: 100vh;
    position: relative;
    overflow: auto;}
    
    兄弟元素{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: visible;
    overflow-y: auto;
    padding-bottom: 10px;
    z-index: 1;}

9、键盘遮挡输入框

输入框如果使用了fixed固定在底部，键盘顶起的时候，iphone上fixed会失效，导致页面滚动输入框会随着页面滚动，并且在部分机型上，输入框偶尔会被键盘遮挡，这种偶现的问题，很不友好。

解决方案： 放弃使用fixed布局，页面如果有滚动，也放弃absolute，如果强行要使用absolute，请参考上一条光标偏移。建议使用flex布局，兼容性会得到解决。

当然，如果遇到以上这些问题，说明产品设计就很不合理，如果必要的话，还是要更换设计，改成input不需要被键盘顶起的设计，这些兼容性的解决方案，也不并不能完美的解决所有机型的问题。

10、ios和android下触摸元素时出现半透明灰色遮罩

-webkit-tap-highlight-color:rgba(255,255,255,0)

11、顶部状态栏背景色

说明：

除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。

如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。

如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。

如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。