标签：screen amp lint 位置 view css rip load input
在页面初始化完成的时候，固定外部容器的宽高，resize的时候也不影响内部dom的相对位置。例如，以body为容器：
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
box-sizing: border-box;
}
body{
position: relative;
overflow-y: scroll;
scroll-behavior:smooth;
-webkit-overflow-scrolling: touch;
}
</style>
<script>
document.addEventListener(‘DOMContentLoaded‘,function(){
var fullWidth = window.screen.width;
var fullHeight = window.screen.height;
if(document.documentElement && document.documentElement.clientHeight){
fullWidth = document.documentElement.clientWidth;
fullHeight = document.documentElement.clientHeight;
}
document.body.style.width = fullWidth + "px";
document.body.style.height = fullHeight + "px";
false);
</script>
1) 监听resize事件，计算位置并滚动页面到一定距离。例如：
window.onresize = function(){
// 计算输入框离窗口顶部的距离
var toTop = document.activeElement.getBoundingClientRect().top;
// 滚动页面 使输入框距离顶部100px
window.scrollTo({
top: document.documentElement.scrollTop + (toTop - 100),
behavior: "smooth"
});
}
2) scrollIntoView方法
window.onresize = function(){
// 滚动 使输入框处在窗口的中间高度
document.activeElement.scrollIntoView({
behavior:"smooth",
block :"center"
})
}
不是所有的app在键盘弹出的时候都会造成页面的resize，因为客户端程序可以定义键盘弹出是否影响窗口的大小。
在安卓项目中，设置对应activity的SoftInputMode为 adjustPan|stateHidden，这样键盘弹出时就会覆盖窗口，而不会挤压窗口造成变形。
标签：screen amp lint 位置 view css rip load input
原文地址：https://www.cnblogs.com/yangshifu/p/13369638.html
