安卓IOS移动端兼容问题总结

超、凢脫俗 2023-06-10 14:22 21阅读 0赞

之前一直是在维护项目，等到自己开发新项目的时候才发现各种问题，特此记录

1.  滚动条问题

在ios上出现的滚动条滑动的时候会出现特别卡顿，不流畅的现象，解决办法是在有滚动条的元素上面加一行样式

-webkit-overflow-scrolling: touch;

1.  input框内文字过浅问题

在ios上input的value值颜色会比别的元素要浅一些，设置了css之后并不生效，解决办法是在input上添加:

opacity: 1;
    -webkit-text-fill-color: #969799;//颜色看自己需求

1.  cookie不能储存汉字问题

在谷歌的模拟器中没问题，但在手机中就会出现这种问题，解决办法是储存cookie之前将汉字编码，等取用的时候再进行解码，具体代码如下：

//存储
    const setCookie = (cname, cvalue, exdays) => {
        var d = new Date();
        d.setTime(d.getTime() + ((exdays || 7) * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    let str = encodeURIComponent(e.data.name);
    setCookie("name", str);
    //取用
    const getCookie = cname => {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return ''
    }
    let name = decodeURIComponent(getCookie("name"))

1.  日期兼容问题

ios上不支持将`new Date('2019-09-17 12:30:34')`这样格式的时间转换为时间戳，解决方法是将其转换为`new Date('2019/09/17 12:30:34')`。

1.  键盘兼容问题

键盘的兼容问题。。。是个令人抓狂的问题。我司测试机相对没有那么宽裕，三款手机就遇到了三种不同的问题。

*  安卓小屏手机键盘遮挡问题（苹果6s以上版本也有）
    
    如果页面中的input输入框在页面比较靠下的位置，当键盘弹起的时候，页面的布局不会发生改变。。。所以键盘就成功的将input框给盖住了。
    
    解决办法：根据input框距离页面底部的距离进行判断，如果位置比键盘的高度要靠下，就获取焦点的时候将整个页面向上移动。移动的距离，就看各自的需求了，我是用百分比来作为单位在移动端真机调试出来的。思路已经有了，但真实操作的时候就又会遇到别的问题了，比如安卓手机监听不到键盘收起的事件，知道你们懒，代码已经贴出来了。

1.  固定定位问题

问题年年有，今年特别多。当把键盘的兼容问题解决之后，又发现了新的问题。因为表单页最下面的按钮是固定定位到最下面的，最开始是没有什么问题的，当解决完键盘兼容问题之后，神奇的发现。。。每次键盘弹出来的时候，固定定位的按钮都会被键盘给顶上去，这怎么能行呢。。。。刚好上一步解决的就是键盘的兼容问题，所以灵机一动，直接就在键盘的事件里面做动作啦。

> 当键盘弹起的时候，把底部的按钮隐藏；当键盘收起的时候，显示底部的按钮。

是不是很机制的办法。反正键盘弹起来的时候，用户看不到底部的内容，保证键盘/按钮有一个在页面上就完美了。

但也明白，这不是最终解决问题的办法，如果各位看官有更好的办法，欢迎留言或私聊。定不胜感激。