织梦移动端文章字体自适应设置

随着移动端流量占比持续提升，织梦站点在手机端的字体显示体验直接影响用户停留时长与阅读完成率。本文系统讲解织梦移动端文章字体自适应的配置方法，帮助站点实现不同屏幕尺寸下的最优阅读体验。

一、移动端字体不自适应的常见表现

1. 固定像素导致小屏挤压

模板使用 font-size:14px 固定值，在 320px 宽的手机上文字偏大，在 768px 平板上又显得过小，无法随屏幕等比缩放。

2. viewport 未正确配置

移动端模板缺少 viewport meta 标签，浏览器按桌面宽度渲染后整体缩放，文字模糊且需手动放大。

3. 长文本无法换行溢出

文章正文容器未设置 word-wrap，长英文单词或 URL 导致布局横向溢出。

二、字体自适应完整设置方案

1. 配置 viewport 基础环境

在移动端模板 /templets/plus/ 对应的 .htm 文件头部，确保 viewport 标签存在且参数正确：

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

initial-scale=1.0 保证初始不缩放，保留 user-scalable=yes 允许用户手动放大，提升可访问性。

2. 采用 rem 单位实现等比缩放

rem 是相对于根元素 html 的 font-size 计算的单位，通过 JS 动态调整根字号，可实现全局等比缩放。在模板底部添加：

<script>
function setRem(){
  var html=document.documentElement;
  var width=html.clientWidth || 375;
  // 设计稿375px宽时，1rem=100px
  if(width > 750) width=750;
  html.style.fontSize=(width / 375 * 100) + 'px';
}
setRem();
window.addEventListener('resize', setRem);
</script>

对应的 CSS 中，正文采用 rem 单位：

.article-content{
  font-size: 0.28rem;  /* 375px下约28px */
  line-height: 1.75;
  color: #333;
}
.article-content h2{ font-size: 0.36rem; }
.article-content p{ margin: 0.2rem 0; }

3. 媒体查询兼容断点

对于不使用 rem 的场景，通过媒体查询设置不同断点的字号：

/* 默认移动端 */
.article-content{ font-size: 16px; line-height: 1.8; }

/* 大屏手机 414px+ */
@media(min-width:414px){
  .article-content{ font-size: 17px; }
}

/* 平板 768px+ */
@media(min-width:768px){
  .article-content{ font-size: 18px; line-height: 2; }
}

/* 超小屏 320px */
@media(max-width:359px){
  .article-content{ font-size: 15px; }
}

4. 使用 clamp 实现流式字号

现代浏览器支持 clamp() 函数，可在最小值与最大值之间平滑过渡：

.article-content{
  font-size: clamp(15px, 4vw, 18px);
  /* 最小15px，视口宽度4%，最大18px */
}

三、正文排版优化配置

1. 段落与行间距

.article-content p{
  margin: 0 0 1em;
  text-align: justify;      /* 两端对齐 */
  word-break: break-all;     /* 长单词换行 */
  overflow-wrap: break-word;
}

2. 图片自适应

.article-content img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
}

3. 表格横向滚动

.article-content table{
  width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

四、注意事项

织梦移动端模板若使用独立域名（m.xxx.com），需在后台「系统基本参数」中开启多站点支持，并确保移动模板文件与 PC 端分离部署。同时检查文章内容中是否被编辑器插入了固定宽度的内联样式（如 style="font-size:14pt"），这类内联样式会覆盖 CSS 设置，需在保存时过滤清除。

移动端阅读体验优化是一项持续工作，建议结合百度搜索资源平台提供的移动端友好度检测工具定期验证。字体自适应只是基础，后续可进一步优化首屏加载速度、点击热区大小和色彩对比度，让织梦站点在移动搜索中获得更好的排名与用户反馈。