如何通过浏览器标准属性获取显示像素密度并适配电子书HTML？

1. 让em单位在桌面/平板保持一致物理尺寸 #

不用外部API，直接利用浏览器自带的设备属性就能实现em物理尺寸统一：

方法1：CSS媒体查询适配DPI #

针对不同DPI设备设置根元素字体大小，确保1em的物理尺寸一致：

/* 桌面常规DPI（约96dpi） */
@media (min-resolution: 96dpi) and (max-resolution: 191dpi) {
  html {
    font-size: 16px;
  }
}
/* 平板高DPI（约192dpi） */
@media (min-resolution: 192dpi) {
  html {
    font-size: 32px;
  }
}

Firefox 68支持min-resolution/max-resolution查询，直接用这个就能快速适配不同DPI设备。

方法2：JS动态计算 #

如果需要更精准的适配，用JS获取设备像素比（DPR），动态设置根字体：

// 桌面基础字体大小，可按需调整
const baseFont = 16;
// 获取设备像素比，默认值为1
const dpr = window.devicePixelRatio || 1;
// 设置根字体大小，保证跨设备物理尺寸一致
document.documentElement.style.fontSize = `${baseFont * dpr}px`;

之后页面建议用rem单位代替em（rem基于根元素字体），更易控制全局尺寸。

2. 平板Firefox自定义默认字体（不修改Android全局设置） #

方法1：通过about:config修改 #

打开Firefox的about:config页面，搜索并修改以下配置项：

• font.name.sans-serif.android：替换为你想要的字体名称（比如"Roboto"、"Noto Sans"）
• font.size.variable.android：设置默认字体大小（比如20）
• font.size.fixed.android：固定字体大小，按需调整

修改后重启Firefox即可生效。

方法2：CSS强制指定字体 #

直接在样式表中强制设置页面字体，覆盖浏览器默认：

body {
  font-family: "你的目标字体", sans-serif !important;
  font-size: 1rem; /* 结合问题1的根字体设置，保证尺寸一致 */
}

如果目标字体未在平板上安装，会自动回落到系统字体，建议选择Android自带的通用字体。

3. 目录章节号与标题始终同行，标题单独换行 #

用Flexbox布局实现，完全不需要表格：

HTML结构 #

<div class="toc-item">
  <span class="toc-num">1.2.3</span>
  <span class="toc-text">这是一段很长的章节标题，会在自己的区域内自动换行，不会跑到章节号下方</span>
</div>

CSS样式 #

.toc-item {
  display: flex;
  align-items: flex-start; /* 让章节号和标题顶部对齐 */
  margin: 0.3rem 0;
}
.toc-num {
  flex-shrink: 0; /* 章节号不收缩，固定宽度 */
  width: 4rem; /* 根据最长章节号调整宽度 */
  margin-right: 0.5rem;
  text-align: right; /* 章节号右对齐，排版更整齐 */
}
.toc-text {
  flex-grow: 1; /* 标题占满剩余空间 */
  word-wrap: break-word; /* 自动换行 */
}

这样无论窗口多窄，章节号都会固定在左侧，标题只在自己的区域内换行。

额外问题解决 #

viewport标签导致字体过小 #

默认的width=device-width, initial-scale=1.0会让高DPI设备的CSS像素被压缩，导致字体显小。可以用JS动态调整viewport参数：

const viewportMeta = document.querySelector('meta[name="viewport"]');
if (viewportMeta) {
  const dpr = window.devicePixelRatio || 1;
  viewportMeta.content = `width=device-width, initial-scale=${1/dpr}, maximum-scale=1.0, user-scalable=no`;
}

这样能让页面缩放比例适配设备DPI，保证字体大小和桌面一致。

备选样式表切换无效 #

检查样式表的link标签是否正确配置：

<!-- 默认样式表，必须带title -->
<link rel="stylesheet" href="default.css" title="默认样式">
<!-- 备选样式表，rel设为alternate stylesheet + title -->
<link rel="alternate stylesheet" href="large-font.css" title="大字体">
<link rel="alternate stylesheet" href="dark-mode.css" title="深色模式">

• 必须给每个样式表加title属性，Firefox才会在切换菜单中显示对应选项
• 确认样式表路径正确，可在浏览器开发者工具的「网络」面板检查是否加载成功

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