首页
看点啥
插画图片
首页 故障修理 米侠浏览器如何通过脚本完成网页排版的自动重排?

米侠浏览器如何通过脚本完成网页排版的自动重排?

2026-07-20 0

米侠浏览器v5.5+需手动启用脚本重排:先开启「设置→高级设置→脚本注入」总开关并重启,再关闭「自动重排文本」和「阅读模式」,清除缓存后部署对应脚本,最后验证执行效果。

确认浏览器是否支持脚本重排功能

米侠浏览器v5.5+版本已移除原生“自动重排文本”功能,改由用户脚本接管排版逻辑;若你仍在设置里看到该开关,说明当前处于兼容模式,【脚本重排将被系统级重排覆盖,无法生效】。必须先进入「设置」→「高级设置」→「脚本注入」,开启总开关并重启浏览器,否则后续所有脚本均不会执行。

关闭系统级干扰项

这一步不做,脚本注入的CSS和DOM操作会被直接撕毁——阅读模式会剥离所有容器结构,自动重排会强制压平为单列流,两者共存时脚本选中的div可能根本不存在于最终渲染树中。

点击右下角菜单→「设置」→「网页浏览设置」→ 关闭【自动重排文本】和【阅读模式】两项。

关闭后返回任意网页,长按地址栏左侧锁形图标→「网站设置」→ 点击「清除数据」→ 勾选「缓存图像和文件」及「Cookie及其他网站数据」→ 确认清除。不清理缓存,旧排版规则仍会残留生效。

部署基础重排脚本

方法一:适配纯文字类网页(新闻、博客、文档页)

点击地址栏右侧「脚本管理器」图标→「新建脚本」→ 粘贴以下代码:

// ==UserScript==
// @name 网页文字流式重排
// @namespace mihelper.relayout
// @version 1.0
// @description 移除浮动/绝对定位,统一行高与字距,适配小屏阅读
// @match *://*/*
// @grant none
// ==/UserScript==

if (document.body) {
  document.body.style.cssText += 'margin: 0 auto; max-width: 720px; line-height: 1.7; letter-spacing: .02em;';
  document.querySelectorAll('aside, nav, header, footer, iframe, .ad, .sidebar').forEach(el => el.remove());
  document.querySelectorAll('*').forEach(el => {
    if (getComputedStyle(el).float !== 'none') el.style.float = 'none';
    if (getComputedStyle(el).position === 'absolute' || getComputedStyle(el).position === 'fixed') el.style.position = 'static';
  });
}

方法二:适配图文混排网页(电商详情、公众号长文)

在同一页脚本编辑区替换为以下逻辑:

const imgs = document.querySelectorAll('img:not([src*="data:"]):not(.emoji)');
imgs.forEach(img => {
  img.style.cssText += 'max-width: 100%; height: auto; display: block; margin: 1rem auto;';
  if (img.parentElement && ['p', 'div'].includes(img.parentElement.tagName.toLowerCase())) {
    img.parentElement.style.textAlign = 'center';
  }
});
document.body.style.fontSize = '18px';
document.querySelectorAll('h1,h2,h3').forEach(h => h.style.marginTop = '1.5rem');

启用并验证重排效果

第一步:保存脚本后,返回「脚本管理器」主界面,找到刚创建的脚本名称,点击右侧开关确保状态为“已启用”。

第二步:打开目标网页,观察是否出现以下变化:段落左右留白均匀、图片居中且不溢出、标题间距增大、侧边栏广告消失。

第三步:若页面无变化,按F12打开开发者工具→Console标签页→输入document.body.style.maxWidth→回车;若返回空字符串,说明脚本未执行,需检查是否遗漏了脚本注入总开关或路径匹配失败。

第四步:若仅部分元素生效,说明网页使用了Shadow DOM或动态渲染框架(如Vue/React),此时需在脚本头部添加@run-at document-idle并配合MutationObserver监听节点插入。

喜欢(0)

上一篇

火狐浏览器如何批量导出所有已保存的Cookies数据?

火狐浏览器如何批量导出所有已保存的Cookies数据?

下一篇

如何在safari浏览器中导出所有书签文件夹为HTML格式文件?

如何在safari浏览器中导出所有书签文件夹为HTML格式文件?
猜你喜欢