IEEE Xplore 界面优化窄屏观看

开启前：两边留白太多，难看得要死，导致文本部分太窄


开启后

功能简介

这是专为 IEEE Xplore 文献阅读体验优化的增强脚本，特别针对移动端或小屏幕设备（宽度 < 1100px）设计。通过智能宽度控制和样式美化，解决官方页面在小屏下排版拥挤、摘要阅读困难的问题。

• 摘要专属美化：将摘要区域固定为 150% 宽度，并添加白底、边框、阴影及圆角，使其在视觉上更突出，阅读更舒适。
• 全文宽度可调：提供悬浮滑块控件，允许用户在 100%-200% 之间自由调整全文内容宽度，适应不同阅读习惯。
• 智能响应式：仅在窗口宽度小于 1100px 时生效，大屏模式下自动恢复官方原生样式，互不干扰。
• 状态记忆：自动保存用户设置的全文宽度比例，刷新页面后无需重新调整。
• 自动修复布局：强制修正部分 Angular 组件的 display: inline 导致的布局错乱问题，确保内容块状显示。

功能特点

核心阅读优化能力

• 📄 摘要高亮：通过 CSS 注入，为摘要区域添加卡片式样式（背景色 #ffffff、边框 1px solid #ddd、阴影 box-shadow），提升视觉层级。
• 📏 精准控宽：摘要固定 150% 宽度，全文通过滑块动态调整（默认 130%），打破官方固定宽度的限制。
• 🛠️ 布局修复：自动将关键内容容器（如 xpl-document-full-text, section 等）强制设置为 display: block，避免行内元素导致的换行异常。
• 📱 小屏专用：针对 < 1100px 视口优化，完美适配平板、笔记本及缩放后的浏览器窗口。

高性能与稳定性

• 🚀 轻量级实现：纯原生 JavaScript + CSS 注入，无外部依赖，加载速度极快。
• 🔋 防抖处理：窗口 resize 事件采用 200ms 防抖，避免频繁重绘导致性能下降。
• 🔄 动态监听：内置 MutationObserver 监听 DOM 变化，应对 IEEE Xplore 单页应用（SPA）的动态内容加载，确保样式持续生效。
• 💾 本地存储：使用 localStorage 记忆滑块位置，个性化配置持久化保存。

交互体验

• 🎛️ 悬浮控制面板：右上角半透明黑色悬浮面板，包含标签、滑块、数值显示及关闭按钮，操作直观且不遮挡核心内容。
• 🎨 视觉美化：摘要区域增加 16px 内边距和 8px 圆角，营造现代卡片式阅读体验。
• 🔕 可隐藏 UI：提供关闭按钮，可暂时隐藏控制面板，还原文档全屏视野。
• ⚙️ 实时反馈：拖动滑块时，全文宽度实时变化，数值显示同步更新，所见即所得。

安装方法

1. 确保浏览器已安装用户脚本管理器扩展：

   • Tampermonkey (推荐)
   • Violentmonkey
   • 脚本猫 (国产，中文友好)

2. 点击下方链接安装脚本：
   

3. 或者手动创建新脚本，复制上述完整代码并保存至脚本管理器

适用页面

• https://ieeexplore.ieee.org/abstract/document/*
• https://ieeexplore.ieee.org/document/*

操作说明

注意：

1. 建议缩放比例：为了获得最佳阅读体验，建议将浏览器页面缩放设置为 80% 后再使用本脚本。
2. 生效范围：脚本仅在小屏幕（< 1100px）下生效，大屏桌面端请禁用或忽略。
3. 摘要样式：摘要区域的样式（白底、阴影等）是固定的，不受滑块控制，始终保持在 150% 宽度。
4. 兼容性：脚本依赖 IEEE Xplore 特定的 Angular 组件标签（如 xpl-document-abstract），若官网改版可能导致失效。

技术细节

核心配置

const CONFIG = {
    MAX_WIDTH_TRIGGER: 1100,      // 生效的最大窗口宽度阈值
    DEFAULT_SCALE: 130,           // 全文默认宽度比例 (%)
    MIN_SCALE: 100,               // 滑块最小值 (%)
    MAX_SCALE: 200,               // 滑块最大值 (%)
    ABSTRACT_FIXED_SCALE: 150,    // 摘要固定宽度比例 (%)
    
    // 全文受控选择器列表
    FULL_TEXT_SELECTORS: [
        'xpl-document-full-text',
        'section[_ngcontent-ng-c630968424]',
        '#toc-wrapper',
        '.trail-content > div:first-child'
    ],
    
    // 摘要选择器
    ABSTRACT_SELECTOR: 'xpl-document-abstract'
};

核心功能实现

// 1. 摘要样式美化（固定 150% + 卡片效果）
function applyAbstractStyle() {
    const abstractEl = document.querySelector(ABSTRACT_SELECTOR);
    if (abstractEl) {
        abstractEl.style.setProperty('width', '150%', 'important');
        abstractEl.style.setProperty('background-color', '#ffffff', 'important');
        abstractEl.style.setProperty('border', '1px solid #ddd', 'important');
        abstractEl.style.setProperty('box-shadow', '0 2px 8px rgba(0,0,0,0.1)', 'important');
        abstractEl.style.setProperty('border-radius', '8px', 'important');
        abstractEl.style.setProperty('padding', '16px', 'important');
    }
}

// 2. 全文宽度动态调整（受滑块控制）
function applyFullTextWidth(scale) {
    FULL_TEXT_SELECTORS.forEach(selector => {
        document.querySelectorAll(selector).forEach(el => {
            el.style.setProperty('width', `${scale}%`, 'important');
            el.style.setProperty('display', 'block', 'important'); // 修复 inline 布局问题
        });
    });
}

// 3. 悬浮控制面板创建
function createControlPanel() {
    // 创建包含 Label, Range Input, Value Display, Close Button 的固定定位面板
    // 监听 input 事件实时更新全文宽度并保存至 localStorage
}

执行流程

1. 初始化：页面加载完成后，从 localStorage 读取上次保存的全文宽度比例。
2. UI 构建：在右上角创建悬浮控制面板，初始化滑块位置。
3. 样式应用：立即执行 applyWidthFix，为摘要添加美化样式，为全文应用初始宽度。
4. 动态监听：
   • Resize：监听窗口大小变化，若宽度 < 1100px 则应用样式，否则重置为原生样式。
   • MutationObserver：监听 DOM 子节点变化，应对 SPA 路由跳转或动态加载，延迟 500ms 后重新应用样式。
5. 用户交互：用户拖动滑块时，实时更新全文宽度并保存配置；点击关闭按钮隐藏面板。

常见问题

Q: 为什么在大屏幕上没有效果？

A:
脚本设计了 MAX_WIDTH_TRIGGER = 1100 的阈值。当浏览器窗口宽度大于 1100px 时，脚本会自动移除所有自定义样式，恢复 IEEE Xplore 的原生布局。这是为了避免在大屏上造成过度拉伸。如需在大屏使用，可修改代码中的阈值。

Q: 摘要看起来太宽了怎么办？

A:
摘要宽度被硬编码为 150%，这是为了在小屏下提供更好的阅读行长。如果需要调整，可以在脚本代码中修改 ABSTRACT_FIXED_SCALE 常量的值。

Q: 滑块拖动后页面闪烁怎么办？

A:
IEEE Xplore 是基于 Angular 的重型单页应用，DOM 结构复杂。脚本已加入防抖和延迟机制，但在极低配置设备上可能仍有轻微重绘。建议关闭浏览器其他无关标签页以释放资源。

Q: 如何恢复默认设置？

A:
清除浏览器本地存储中的 ieee_width_scale 键值，或直接卸载脚本。刷新页面后，滑块将恢复到默认的 130%。

更新日志

v1.0

• 🎉 初始版本：实现 IEEE Xplore 小屏宽度固定与摘要美化功能
• 🎨 摘要美化：新增白底、边框、阴影、圆角及内边距，提升阅读体验
• 🎛️ 滑块控件：提供 100%-200% 全文宽度无级调节，支持状态记忆
• 🛠️ 布局修复：强制修正 display 属性，解决 Angular 组件行内显示问题
• 📱 响应式逻辑：仅在小屏 (<1100px) 下生效，大屏自动退化至原生样式
• 👁️ DOM 监听：集成 MutationObserver，适配 SPA 动态内容加载

免责声明

本脚本仅供学习交流使用，请勿用于商业用途。脚本仅通过 CSS 注入优化页面展示效果，未修改 IEEE Xplore 的任何核心功能和数据，使用脚本产生的一切后果由使用者自行承担。

反馈与支持

如果您在使用过程中遇到问题或有改进建议，请通过以下方式反馈：

• 在脚本管理器的脚本评论区留言
• 提交 Issue 到脚本仓库
• 反馈 IEEE Xplore 页面结构更新导致的脚本失效问题

温馨提示：

1. 若 IEEE Xplore 更新前端架构（如组件标签名变化），可能导致脚本失效，请关注最新版本
2. 建议配合浏览器 80% 缩放比例使用，以获得最佳的视口宽度
3. 脚本仅优化视觉展示，不涉及任何论文内容的下载或破解
4. 如遇样式冲突，可尝试禁用浏览器其他可能影响 CSS 的插件