Android Chrome页面刷新后文本大小异常的CSS问题求助

兄弟，我之前也踩过Chrome移动端这个坑！看你描述的情况——页面加载偶尔正常，刷新后部分用了相同媒体查询CSS的文本突然缩小，其他同样式文本却没事，这大概率是Chrome的字体缩放机制或者渲染时序搞的鬼，给你几个亲测有效的解决思路：

1. 先修正CSS里的小错误 #

首先注意你写的padding: none是无效的，CSS里没有这个属性值，得改成padding: 0，这种小疏漏有时候也会触发浏览器的异常渲染。

2. 强制禁用Chrome的自动字体缩放 #

Android Chrome自带自动调整字体大小的功能，哪怕你明确设了font-size: 100%，它也可能偷偷篡改。在你的媒体查询样式里加上这两行：

.list {
  /* 保留你的原有样式 */
  color: white;
  padding: 0; /* 修正这里 */
  display: block;
  margin-left: 0;
  margin-right: 10px;
  text-align: left;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  font-size: 100%;
  /* 新增以下属性锁死字体大小 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

text-size-adjust能强制浏览器放弃自动缩放文本的逻辑，严格遵循你设置的字体尺寸，这招对Chrome的字体缩放bug特别管用。

3. 确认Viewport设置正确 #

如果页面的viewport配置不对，Chrome会乱搞布局和字体渲染。确保HTML头部的meta标签是这样的：

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

这个设置能固定页面的缩放比例，避免浏览器自作主张调整布局。

4. 检查媒体查询的优先级和位置 #

有时候媒体查询写在CSS文件前面，会被后面的通用样式覆盖，或者优先级不够导致样式不生效。你可以：

• 把移动端的媒体查询放在CSS文件的最末尾，确保它能覆盖之前的通用样式
• 给.list加个父元素选择器提升优先级，比如@media (max-width: 768px) { .page-container .list { /* 样式 */ } }

5. 排查字体加载的时序问题 #

如果你的Segoe字体是外部加载的，Chrome可能在字体未加载完成时先渲染文本，刷新后字体加载完成导致尺寸突变。可以给字体添加font-display属性优化加载逻辑：

@font-face {
  font-family: 'Segoe';
  src: url('你的字体文件路径.woff2') format('woff2');
  font-display: swap;
}

font-display: swap会让浏览器先用系统字体占位，等自定义字体加载完成后再平滑切换，避免布局跳动和尺寸异常。

你提到两个用了完全相同CSS的列表表现不同，这更说明是浏览器渲染时序或者缓存的问题，先试试上面的方法，应该能解决。要是还不行，清一下Chrome的缓存，或者在开发者工具里开启「禁用缓存」选项测试下，说不定是缓存的旧样式在搞鬼。

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