前端小问题记录

问题1：ios底部小黑条的兼容

//需按此顺序写css样式
height: calc(70px + constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/
height: calc(70px + env(safe-area-inset-bottom)); /*兼容 IOS>11.2*/

问题2:H5页面可查看打印信息等

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//cdn.jsdelivr.net/npm/eruda';
document.head.appendChild(script);
script.onload = function() {
    eruda.init();
}

问题3:white-space

属性	效果	兼容
normal(默认)	所有空格、回车、制表符都合并成一个空格，文本自动换行	IE7\IE6+
nowrap	所有空格、回车、制表符都合并成一个空格，文本不换行	IE7\IE6+
pre	所有东西原样输出，文本不换行	IE7\IE6+
pre-wrap	所有东西原样输出，文本换行	IE8+
pre-line	所有空格、制表符合并成一个空格，回车不变，文本换行	IE8+
inherit	继承父元素	IE不支持，不推荐用

问题4:safari浏览器下解决Date日期的NAN问题

Date.parse()方法当无法解析的时候会返回NAN,YYYY-MM-DD HH:MM:SS格式无法解析，需要转换成YYYY/MM/DD HH:MM:SS格式。在firefox和chrome中可以直接支持Date.parse(YYYY-MM-DD HH:MM:SS)，但是safari无法支持，需要作如下转换

var date = new Date(Date.parse(expireDate.replace(/-/g, "/")));

问题5

1.history.push
history.push方法更改当前路由，会向当前路由栈里面添加一条新的记录，跳转后点击回退可回退到当前页面

2.history.replace
history.replace方法更改当前路由，不会向当前路由栈里面添加一条新的记录，跳转后点击回退不可回退到当前页面，与他的名字一样，是直接替换当前路由

3.history.go方法与window.history.go()类似，参数为整数，表示向前或向后跳转

问题6 编码问题

escape不编码字符有69个：，+，-，.，/，@，_，0-9，a-z，A-Z
encodeURI不编码字符有82个：!，#，$，&，’，(，)，，+，,，-，.，/，:，;，=，?，@，，~，0-9，a-z，A-Z
encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，，~，0-9，a-z，A-Z