移动端各子页面字体大小不一致问题求助（已设1.05rem）

我在网站全局设置了1.05rem的字体大小，但iPhone移动端查看各子页面时字体显示不一致，桌面端正常。Distro页面段落字体偏小，Catalog页面段落偏大，无法定位问题。

相关代码 #

Distro页面代码 #

<div class="wrapper">
  <div class="copy">
      <p>I have a ton of tapes, CDs and records for sale. Will be listing them here in the coming days.</p>
  </div>
</div>

Catalog页面代码 #

<div class="wrapper">
  <div class="copy">
      <p>Support the label and buy directly, message us via <b>daggerforest@gmail.com</b> and we can take it from there.</p><p>Alternatively our stock is also available on Bandcamp > <a href="https://daggerforest.bandcamp.com/" target"_blank"><b>daggerforest.bandcamp.com</b></a></p>
      <div class="divider">✧</div>
      <div class="cat-rel"><b>DF000</b> > <a href="https://daggerforest.bandcamp.com/album/dagger-forest" target="_blank">V.A.<span class="tab"></span>Dagger Forest</a><br><span class="descr">CDR / 20 copies / 「12.07.2014」</span></div>
      <div class="cat-rel"><b>DF001</b> >  <a href="https://daggerforest.bandcamp.com/album/when-you-burn" target="_blank">Daan Mol<span class="tab"></span>When You Burn</a><br><span class="descr">C12 / 50 copies / 「09.10.2014」</span></div>
      <div class="cat-rel"><b>DF002</b> >  <a href="https://daggerforest.bandcamp.com/album/ep1" target="_blank">E Y E S H A D O W S<span class="tab"></span>EP1</a><br><span class="descr">C17 / 50 copies / 「05.02.2015」</span></div>
      <div class="cat-rel"><b>DF003</b> >  <a href="https://daggerforest.bandcamp.com/album/heru-ra-ha" target="_blank">Mascara<span class="tab"></span>Heru-Ra-Ha</a><br><span class="descr">C22 / 50 copies / 「29.07.2015」</span></div>
      <div class="divider">✧</div>
      <p><div  class="middle"><img src="https://witch-house.com/tape.jpg" class="banner-sm"></img></div>
  </div>
</div>
</body>

CSS代码 #

body {
  background-color: #fff;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-family: "Syne Mono", monospace;
}

.wrapper {
  max-width: 960px;
  padding-right: 10px;
  padding-left:  10px;
  margin: 0 auto;
}

a {color: #000000;
    text-decoration: none;}

a:hover {color: #000000;
    font-weight: 700;
    text-decoration: none;}
    
.middle {   text-align: center;
}

.copy  {width:100%;
    max-width:780px;
    margin: 0 auto;
    padding-bottom:20px;
    background-color:#fff;
    text-align:left;
  font-size: 1.05rem;
}

.divider {  text-align: center;
  color: #000;
}
.tab {
    display: inline-block;
    margin-left: 2em;
}
.descr {font-size:1rem;}

.cat-rel {margin-bottom:20px;}

问题原因与解决办法 #

1. HTML结构不规范触发浏览器异常解析
   Catalog页面中<p>标签直接嵌套了<div>块级元素，这不符合HTML规范。浏览器会自动拆分DOM结构，导致.copy的字体样式继承出现偏差，进而让Safari移动端触发字体自适应缩放。

   • 修复方式：将包含图片的<p>标签替换为<div>，或者直接移除<p>保留图片容器：

     <!-- 修复后代码 -->
     <div class="middle"><img src="https://witch-house.com/tape.jpg" class="banner-sm"></div>
     

2. 禁用iOS Safari自动字体缩放
   Safari移动端会根据内容自动调整字体大小，添加CSS属性强制关闭该特性：

   .copy {
     /* 原有样式保留 */
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
   }
   

3. 明确rem基准字体
   在CSS中给html元素设置明确字体大小，确保rem计算统一：

   html {
     font-size: 16px;
   }
   

内容的提问来源于stack exchange，提问作者Alan V K