桌面端网页显示正常移动端仅展示少量元素问题求助

问题定位 #

• HTML存在大量语法错误：多个<h2>、<h3>、<p>、<img>标签未正确闭合，<strong>结束标签拼写错误，根标签未正确闭合，浏览器（尤其是移动端容错率较低的浏览器）解析DOM结构时发生错乱，导致页面内容渲染异常
• viewport元标签缺少核心配置：未设置width=device-width，移动端默认以980px宽度的虚拟视口渲染页面，与实际设备屏幕宽度不匹配，导致内容显示不全

解决方案 #

1. 修复所有HTML语法错误 #

你需要逐一修正以下标签错误：

• 所有未闭合的标题、段落标签：将<h2>Our Work<h2>改为<h2>Our Work</h2>，同理所有<h3>、<p>的结尾都替换为对应的闭合标签</h3>、</p>
• 补全第四张图片的闭合属性和alt属性：将<img src="https://static.independent.co.uk/2021/05/22/13/newFile-1.jpg?width=640&auto=webp&quality=75" </main>改为<img src="https://static.independent.co.uk/2021/05/22/13/newFile-1.jpg?width=640&auto=webp&quality=75" alt=""></main>
• 修正拼写错误的闭合标签：将</srtong>改为</strong>
• 修正根标签闭合：将页面末尾的<html>改为</html>

2. 完善viewport配置 #

将head中的viewport标签替换为以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

新增的width=device-width会强制让页面视口宽度与设备物理屏幕宽度保持一致，是移动端适配的基础配置。

3. 可选优化（避免小屏内容溢出） #

在媒体查询的#heading-text样式中新增overflow-y: auto，同时可以适当缩小移动端的标题字号，避免内容撑高容器导致溢出：

@media only screen and (max-width: 815px) {
  h1 {
    font-size: 2rem;
  }
  #heading-text {
    height: 50vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto; /* 新增溢出滚动 */
  }
}

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