个人网站桌面端正常移动端适配异常求助（附HTML/CSS代码）

一、文本未适配缩放的修复方案 #

• 添加viewport元标签：在HTML的<head>中加入该标签，让移动端浏览器正确识别屏幕宽度并适配缩放：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 替换为响应式字体单位：将固定的px字体单位换成rem、vw这类相对单位，保证字体随屏幕尺寸自适应：

  body {
    font-size: 16px; /* 设置基础字体大小 */
  }
  h1 {
    font-size: 2rem; /* 相对于基础字体的2倍大小 */
  }
  p {
    font-size: 1rem;
  }
  /* 也可直接基于屏幕宽度设置 */
  h2 {
    font-size: 5vw;
  }
  

• 处理文本溢出换行：避免长文本超出屏幕边界，添加以下CSS规则：

  p, div, span {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  

• 媒体查询微调：针对小屏设备单独调整字体大小，优化阅读体验：

  @media (max-width: 480px) {
    body {
      font-size: 14px;
    }
    h1 {
      font-size: 1.8rem;
    }
  }
  

二、Google Drive嵌入PDF适配屏幕的修复方案 #

• 用容器包裹iframe并设置自适应样式：不要给iframe固定宽高，通过容器控制尺寸，让iframe继承容器的100%宽度：

  <div class="pdf-container">
    <iframe src="你的Google Drive PDF嵌入链接" frameborder="0"></iframe>
  </div>
  

  对应CSS：

  .pdf-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 1.414/1; /* 匹配A4纸宽高比，可根据你的PDF调整 */
  }
  .pdf-container iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  

• 清理嵌入链接的固定尺寸参数：如果Google Drive的嵌入链接里带有width、height参数，直接删除这些参数，让iframe自动适配容器尺寸。比如把https://drive.google.com/file/d/xxx/preview?width=800&height=600改成https://drive.google.com/file/d/xxx/preview。
• 备选：使用object标签替代iframe：若iframe适配仍有问题，尝试用<object>标签实现PDF嵌入：

  <object data="你的Google Drive PDF嵌入链接" type="application/pdf" class="pdf-object">
    你的浏览器不支持PDF预览，请<a href="PDF下载链接">点击下载</a>
  </object>
  

  对应CSS：

  .pdf-object {
    width: 100%;
    height: 80vh; /* 占视口高度的80%，可按需调整 */
  }
  

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