移动端部分<p>段落字体大小异常的原因排查求助

PC端页面显示完全正常，但在三星手机上，同一div内的部分<p>段落字体大小明显大于其他段落，且这些段落看似随机。已在Firefox、Chrome及Chrome移动端模拟视图中测试，显示均正常；多次清除手机浏览数据，排除了旧版本缓存残留问题；CSS及HTML文件中未对<p>标签设置其他样式。

相关代码：

CSS #

p {
  font-family: "Crimson Text", "serif";
  text-align: center;
  font-size: 4vw;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: rgba(161, 231, 161, 0.5) 0 0 1px;
}

@media screen and (min-width: 800px) {
  p {
    font-size: 2vw;
  }
}

@media screen and (min-width: 1400px) {
  p {
    font-size: 1vw;
  }
}

HTML #

<p>-A WALK TO THE SEA SIDE-</p>

<p>Listed as the number one beach resort in Poland, situated at the Baltic Coast: Welcome to Sopot! We would love to bring our guests to where we had one of our first dates in Poland; Located just a 10 minute walk away from Hotel Rezydent, the Sopot Pier.</p>

<p>11:00 Meet-up at <a href="#hotel"> Hotel Rezydent</a></p>
<p>11:20-12:20 Strolling by the Pier</p>
<p>Attire: Casual</p>

这是三星自带浏览器的文本自动缩放特性导致的——它会自动识别长文本段落并放大字体以提升可读性，但会破坏自定义的字体大小设置。

解决方法是在<p>标签的CSS中添加属性禁用文本自动缩放：

p {
  /* 保留原有样式 */
  font-family: "Crimson Text", "serif";
  text-align: center;
  font-size: 4vw;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: rgba(161, 231, 161, 0.5) 0 0 1px;
  /* 添加以下两行 */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

• text-size-adjust: 100% 是标准属性，设置为100%表示禁止浏览器自动调整文本大小；
• -webkit-text-size-adjust: 100% 是WebKit内核浏览器（包括三星浏览器）的前缀版本，确保兼容性。

添加后，所有<p>标签的字体大小会严格遵循你设置的vw单位，不会被浏览器自动修改。

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