IEEE Xplore界面优化窄屏观看 (摘要固定150% + 白底边框阴影)
摘要固定150%、白底、带边框阴影；全文可通过滑块调整(100%-200%)。<1100px生效。自动修复display:inline问题。
#IEEE
#界面优化
#阅读优化
資料統計
總安裝量
40
近 24 小時
+0
使用者評分
-
廣告
描述
版本1
評分0
權限說明
IEEE Xplore窄屏样式美化，摘要固定150%宽及白底阴影，全文宽度可调。
載入中…
开启前：两边留白太多，难看得要死，导致文本部分太窄
这是专为 IEEE Xplore 文献阅读体验优化的增强脚本，特别针对移动端或小屏幕设备（宽度 < 1100px）设计。通过智能宽度控制和样式美化，解决官方页面在小屏下排版拥挤、摘要阅读困难的问题。
display: inline 导致的布局错乱问题，确保内容块状显示。#ffffff、边框 1px solid #ddd、阴影 box-shadow），提升视觉层级。xpl-document-full-text, section 等）强制设置为 display: block，避免行内元素导致的换行异常。< 1100px 视口优化，完美适配平板、笔记本及缩放后的浏览器窗口。localStorage 记忆滑块位置，个性化配置持久化保存。确保浏览器已安装用户脚本管理器扩展：
点击下方链接安装脚本：
或者手动创建新脚本，复制上述完整代码并保存至脚本管理器
https://ieeexplore.ieee.org/abstract/document/*https://ieeexplore.ieee.org/document/*| 操作方式 | 功能 | 详细说明 |
|---|---|---|
| 拖动悬浮滑块 | 调整全文宽度 | 在 100%-200% 范围内调整正文、目录等区域的宽度，实时生效 |
| 点击关闭按钮 (×) | 隐藏控制面板 | 临时隐藏右上角的控制面板，再次刷新页面可恢复 |
| 缩小浏览器窗口 | 触发脚本生效 | 当窗口宽度 < 1100px 时，脚本自动应用样式；大于该值则恢复原生样式 |
| 刷新页面 | 保持设置 | 脚本会自动读取上次保存的滑块位置，无需重复调整 |
注意：
- 建议缩放比例：为了获得最佳阅读体验，建议将浏览器页面缩放设置为 80% 后再使用本脚本。
- 生效范围：脚本仅在小屏幕（< 1100px）下生效，大屏桌面端请禁用或忽略。
- 摘要样式：摘要区域的样式（白底、阴影等）是固定的，不受滑块控制，始终保持在 150% 宽度。
- 兼容性：脚本依赖 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
}
localStorage 读取上次保存的全文宽度比例。applyWidthFix，为摘要添加美化样式，为全文应用初始宽度。A:
脚本设计了 MAX_WIDTH_TRIGGER = 1100 的阈值。当浏览器窗口宽度大于 1100px 时，脚本会自动移除所有自定义样式，恢复 IEEE Xplore 的原生布局。这是为了避免在大屏上造成过度拉伸。如需在大屏使用，可修改代码中的阈值。
A:
摘要宽度被硬编码为 150%，这是为了在小屏下提供更好的阅读行长。如果需要调整，可以在脚本代码中修改 ABSTRACT_FIXED_SCALE 常量的值。
A: IEEE Xplore 是基于 Angular 的重型单页应用，DOM 结构复杂。脚本已加入防抖和延迟机制，但在极低配置设备上可能仍有轻微重绘。建议关闭浏览器其他无关标签页以释放资源。
A:
清除浏览器本地存储中的 ieee_width_scale 键值，或直接卸载脚本。刷新页面后，滑块将恢复到默认的 130%。
display 属性，解决 Angular 组件行内显示问题本脚本仅供学习交流使用，请勿用于商业用途。脚本仅通过 CSS 注入优化页面展示效果，未修改 IEEE Xplore 的任何核心功能和数据，使用脚本产生的一切后果由使用者自行承担。
如果您在使用过程中遇到问题或有改进建议，请通过以下方式反馈：
温馨提示：