移动端的一些样式适配

1、ios端 margin-bottom不起作用

描述：
当内容高度大于 其所有父容器的高度时，内容的 该属性不起作用。
解决；
尽量少用html, body {height: 100%;}这种非常规代码。
最快捷就是改成padding

2、使用flex布局实现底部固定

要点：
总容器 高100%；
display:flex;
flex-direction:column;

中间区域 flex:1；overflow: auto；
参见：
https://www.cnblogs.com/diligenceday/p/5985903.html

注：
采用fixed布局页面，尽量不要出现 输入框，否则在ios 会出现 bug。

3、ios端键盘弹起引发问题

1、弹起后 页面上移，未恢复；
解决：
input注册 blur事件，滚动到底部。
window.scrollTo(0, document.documentElement.clientHeight);

2、键盘弹起后遮盖 输入框；
解决：
input  注册 focus 事件，滚动可视区域的1/3
window.scrollTo(0, document.documentElement.clientHeight/3);

4、安卓端，字体过小时，无法垂直居中，上移了。

解决：
12px时，效果稍好，小于12 基本都会出现这个问题。
把父元素设为：
display: flex;
align-items: center;
justify-content: center；

整个元素做缩小处理
transform: scale(0.5);
  transform-origin: left center;

来源：https://www.cnblogs.com/fan-zha/p/10634685.html