移动端下Typewriter打字特效引发Div位移的问题求助

我帮你排查了代码里的问题，主要是几个CSS细节引发的布局不稳定，导致打字时元素位移、屏幕晃动。下面是具体的修复方案：

问题根源分析 #

1. 拼写错误导致布局计算异常：#app的padding-bottom写成了24p（漏掉了x），浏览器无法识别这个值，会忽略它，可能引发布局高度的不确定性。
2. 小屏幕下内边距过大：.section类默认设置了padding: 135px，在小屏幕下没有调整这个值，导致内容区域过于拥挤，打字时文本高度变化容易触发页面滚动或位移。
3. 容器高度不稳定：打字过程中，文本内容的切换（比如不同长度的strong标签文本）会导致#app的高度波动，进而让父元素高度变化，引发整个页面晃动。

具体修复步骤 #

1. 修正padding拼写错误 #

找到#app的样式，把padding-bottom: 24p;改成：

padding-bottom: 24px;

2. 调整小屏幕下的.section内边距 #

在@media (max-width:500px)的规则里，添加.section的内边距调整，避免小屏幕下内容过于拥挤：

@media (max-width:500px) {
  /* 原有样式保留，新增下面这行 */
  .section { padding: 60px 20px; }
  /* 其他原有样式... */
}

3. 给打字容器设置固定最小高度 #

为#app添加min-height，确保打字过程中容器高度保持稳定，不会因为文本内容变化而改变：

#app { 
  font-size: 38px !important; 
  letter-spacing: 0; 
  line-height: 34px; 
  padding-bottom: 24px;
  /* 新增最小高度 */
  min-height: 68px;
  /* 可选：添加文本居中，优化小屏幕体验 */
  text-align: center;
}

4. 优化小屏幕下的flex对齐 #

把.text的align-content: center改成align-items: center，确保垂直方向对齐更稳定：

.text { display: flex; justify-content: space-around; align-items: center; }

在小屏幕的@media规则里，同样保持这个设置：

@media (max-width:500px) {
  /* 原有样式里的.text修改 */
  .text { flex-direction: column; justify-content: center; align-items: center; }
  /* 其他原有样式... */
}

修复后的完整代码 #

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.box section div { color: rgb(255, 255, 255); margin: 35px 0px; }
.section { width: 100%; padding: 135px; height: 100%; }
.text { display: flex; justify-content: space-around; align-items: center; }
#app { 
  font-size: 38px !important; 
  letter-spacing: 0; 
  line-height: 34px; 
  padding-bottom: 24px;
  min-height: 68px;
  text-align: center;
}
@media (max-width:500px) {
.box section div { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.box { display: flex; flex-direction: column; justify-content: center; }
.text { flex-direction: column; justify-content: center; align-items: center; }
.section { padding: 60px 20px; }
}
.bg-black { background-color: #000; }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="box bg-black">
<section class="section">
<div>
<div class="text">
<div id="app">
</div>
</div>
</div>
</section>
</div>
<div>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script>
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(1500)
.typeString('I am ')
.pauseFor(400)
.typeString('<strong>Developer</strong>')
.pauseFor(1500)
.deleteChars(9)
.typeString('<strong>Designer</strong>')
.pauseFor(1000)
.deleteChars(8)
.typeString('<strong>Sculptor</strong>')
.pauseFor(1000)
.deleteChars(8)
.pauseFor(1000)
.start();
</script>
</body>
</html>

这样修改后，小屏幕下打字时容器高度稳定，内边距合适，不会再出现屏幕晃动的问题了。

内容的提问来源于stack exchange，提问作者user14929188