一、页面布局问题
模拟移动端页面，大体布局思路是，头部区域，中间内容区域，底部区域
大体结构：
<html>
<head></head>
<body>
<header>头部</header>
<section>中间内容</section>
<footer>底部</footer>
</body>
</html>
布局方式①：利用定位
html,body设置width，height 百分百
body相对定位，溢出隐藏
header，section，footer 绝对定位
在section中处理内容，下拉刷新，上拉加载更多等
布局方式②：利用流体盒子 (需处理流体盒子兼容性问题)
html,body设置width，height 百分百
body设置display:flex,flex-direction: column，溢出隐藏
section 设置 flex:1
在section中处理内容，下拉刷新，上拉加载更多等
二、input输入框获取焦点或输入时，整个页面白屏的问题。
解决方案 ： 为input直接父级设置 position:relative;
三、滚动条卡顿问题
解决方案：为根节点设置 -webkit-overflow-scrolling : touch; 开启硬件加速
四、点击事件触发背景高亮问题
解决方案：*{-webkit-tap-highlight-color: transparent;} or *{-webkit-tap-highlight-color: rgba(0,0,0,0);} 或者直接设置到根节点上
五、软键盘弹出遮挡底部input输入框问题
思路：①获取软键盘弹出前 滚动条滚动高度 ②输入框获取焦点时，将内容高度赋值给滚动条滚动高度 ③输入框失去焦点时，将软键盘弹出前滚动条滚动高度赋值给滚动条滚动高度
六、软键盘弹出顶起页面布局问题
思路：软键盘弹出时（大多情况时在，输入框获取焦点时），将body高度设置成浏览器可视区高度
document.body.offsetHeight = document.body.clientHeight
七、关于位置移动的问题
请使用 transform + translate（浏览器会开启一个独立层，无需重绘） 代替 top right bottom left （导致页面重绘，影响页面性能，设置卡顿）
网友评论