之前一直是在维护项目，等到自己开发新项目的时候才发现各种问题，特此记录
- 滚动条问题
在ios上出现的滚动条滑动的时候会出现特别卡顿，不流畅的现象，解决办法是在有滚动条的元素上面加一行样式
-webkit-overflow-scrolling: touch;
- input框内文字过浅问题
在ios上input的value值颜色会比别的元素要浅一些，设置了css之后并不生效，解决办法是在input上添加:
opacity: 1;
-webkit-text-fill-color: #969799;//颜色看自己需求
- 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"))
- 日期兼容问题
ios上不支持将new Date('2019-09-17 12:30:34')这样格式的时间转换为时间戳，解决方法是将其转换为new Date('2019/09/17 12:30:34')。
- 键盘兼容问题
键盘的兼容问题。。。是个令人抓狂的问题。我司测试机相对没有那么宽裕，三款手机就遇到了三种不同的问题。
-
安卓小屏手机键盘遮挡问题（苹果6s以上版本也有）
如果页面中的input输入框在页面比较靠下的位置，当键盘弹起的时候，页面的布局不会发生改变。。。所以键盘就成功的将input框给盖住了。
解决办法：根据input框距离页面底部的距离进行判断，如果位置比键盘的高度要靠下，就获取焦点的时候将整个页面向上移动。移动的距离，就看各自的需求了，我是用百分比来作为单位在移动端真机调试出来的。思路已经有了，但真实操作的时候就又会遇到别的问题了，比如安卓手机监听不到键盘收起的事件，知道你们懒，代码已经贴出来了。
- 固定定位问题
问题年年有，今年特别多。当把键盘的兼容问题解决之后，又发现了新的问题。因为表单页最下面的按钮是固定定位到最下面的，最开始是没有什么问题的，当解决完键盘兼容问题之后，神奇的发现。。。每次键盘弹出来的时候，固定定位的按钮都会被键盘给顶上去，这怎么能行呢。。。。刚好上一步解决的就是键盘的兼容问题，所以灵机一动，直接就在键盘的事件里面做动作啦。
当键盘弹起的时候，把底部的按钮隐藏；当键盘收起的时候，显示底部的按钮。
扫描二维码关注公众号，回复： 8894306 查看本文章
是不是很机制的办法。反正键盘弹起来的时候，用户看不到底部的内容，保证键盘/按钮有一个在页面上就完美了。
但也明白，这不是最终解决问题的办法，如果各位看官有更好的办法，欢迎留言或私聊。定不胜感激。
