优化125论坛(bbs.125.la)在手机端的显示效果
目前为
// ==UserScript==
// @name 125论坛手机版优化
// @namespace http://tampermonkey.net/
// @version 1.4
// @description 优化125论坛(bbs.125.la)在手机端的显示效果
// @author Your name
// @match https://bbs.125.la/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 检查是否为移动端访问
if(!/mobile/i.test(navigator.userAgent)) return;
// 强制设置viewport并防止被修改
function setViewport() {
let viewport = document.querySelector('meta[name="viewport"]');
if(!viewport) {
viewport = document.createElement('meta');
viewport.name = 'viewport';
document.head.appendChild(viewport);
}
const currentContent = viewport.content;
const newContent = 'width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes';
// 只在内容不同时更新，避免无限循环
if(currentContent !== newContent) {
viewport.content = newContent;
}
}
// 初始设置viewport
setViewport();
// 使用防抖函数来限制viewport更新频率
function debounce(func, wait) {
let timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(() => func(), wait);
};
}
// 监听viewport变化，使用防抖
const debouncedSetViewport = debounce(setViewport, 100);
const observer = new MutationObserver(debouncedSetViewport);
observer.observe(document.head, {
subtree: true,
attributes: true,
attributeFilter: ['content']
});
// 添加自定义样式
const customCSS = `
/* 重置所有元素的字体大小计算方式 */
* {
font-size: initial !important;
transform: none !important;
zoom: normal !important;
-webkit-text-size-adjust: none !important;
box-sizing: border-box !important;
}
/* 使用rem作为基础单位 */
html {
font-size: 16px !important;
}
/* 基础样式设置 */
body {
font-size: 1rem !important;
line-height: 1.8 !important;
text-size-adjust: 100% !important;
-webkit-text-size-adjust: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* 响应式字体大小 */
.thread_tit, h3 {
font-size: 1.1rem !important;
line-height: 1.4 !important;
margin: 0 0 0.5rem 0 !important;
padding-right: 80px !important; /* 为右侧数字留出空间 */
position: relative !important;
display: block !important;
}
.f_count, .sub_forum {
font-size: 0.9rem !important;
line-height: 1.4 !important;
}
/* 列表项内容 */
.sub_forum li {
padding: 0.75rem 0.5rem !important;
font-size: 1rem !important;
margin-bottom: 0.5rem !important;
border-bottom: 1px solid rgba(0,0,0,0.1) !important;
position: relative !important;
min-height: 70px !important;
}
/* 导航和按钮 */
.btFixed, .header, .footer {
font-size: 0.875rem !important;
line-height: 1.4 !important;
}
/* 链接和可点击元素 */
a, button, input[type="button"], input[type="submit"] {
padding: 0.5rem !important;
min-height: 44px !important;
display: inline-block !important;
line-height: 1.4 !important;
vertical-align: middle !important;
}
/* 内容区域 */
.container, .content {
padding: 0.625rem !important;
width: 100% !important;
margin: 0 !important;
}
/* 图片响应式 */
img {
max-width: 100% !important;
height: auto !important;
transform: none !important;
vertical-align: middle !important;
}
/* 修复可能的溢出问题 */
div, p, span, li {
max-width: 100vw !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
margin: 0 !important;
}
/* 修复行高和间距 */
.forum_a {
display: block !important;
padding: 0.5rem !important;
margin: 0 !important;
line-height: 1.4 !important;
position: relative !important;
text-decoration: none !important;
}
/* 优化列表显示 */
.sub_forum ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* 清除浮动 */
.cfix::after {
content: "" !important;
display: table !important;
clear: both !important;
}
/* 帖子统计数字样式 */
.f_count {
font-size: 0.85rem !important;
line-height: 1.4 !important;
position: absolute !important;
right: 0.5rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
text-align: right !important;
color: #888 !important;
}
/* 帖子链接样式 */
.forum_a {
display: block !important;
padding: 0.5rem !important;
margin: 0 !important;
line-height: 1.4 !important;
position: relative !important;
text-decoration: none !important;
}
/* 帖子数量标签样式 */
.num {
display: inline-block !important;
margin-left: 0.5rem !important;
font-size: 0.8rem !important;
color: #ff6b6b !important;
vertical-align: middle !important;
}
/* 分类标题样式 */
.subforumshow h2 {
font-size: 1.2rem !important;
padding: 0.75rem 1rem !important;
margin: 0 !important;
background: #f5f5f5 !important;
border-left: 4px solid #ff6b6b !important;
}
/* 修复浮动问题 */
.y {
float: none !important;
position: absolute !important;
right: 0.5rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* 确保内容不会重叠 */
.sub_forum {
margin-bottom: 1rem !important;
}
/* 优化链接点击区域 */
a.forum_a {
min-height: 44px !important;
display: block !important;
position: relative !important;
padding: 0.75rem 0.5rem !important;
color: #333 !important;
text-decoration: none !important;
background: #fff !important;
}
/* 移动端触摸反馈 */
a.forum_a:active {
background: #f5f5f5 !important;
}
/* 用户信息布局优化 */
.userInfo {
padding: 1rem !important;
position: relative !important;
min-height: 80px !important;
display: flex !important;
align-items: center !important;
background: #fff !important;
}
/* 用户头像样式 */
.userInfo .avatar {
width: 60px !important;
height: 60px !important;
margin-right: 1rem !important;
flex-shrink: 0 !important;
}
.userInfo .avatar img {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
object-fit: cover !important;
}
/* 用户名和信息样式 */
.userInfo h3 {
margin: 0 0 0.3rem 0 !important;
padding: 0 !important;
font-size: 1.1rem !important;
line-height: 1.4 !important;
color: #333 !important;
}
.userInfo p {
margin: 0 !important;
font-size: 0.9rem !important;
color: #666 !important;
line-height: 1.4 !important;
}
/* 帖子列表中的用户信息 */
.thread_info {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-top: 0.5rem !important;
font-size: 0.9rem !important;
color: #666 !important;
line-height: 1.4 !important;
}
.thread_info .author {
margin-right: 1rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 40% !important;
}
/* 帖子标题布局优化 */
.thread_tit {
font-size: 1.1rem !important;
line-height: 1.4 !important;
margin: 0 0 0.5rem 0 !important;
padding-right: 80px !important;
display: block !important;
color: #333 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* 列表项布局优化 */
.sub_forum li {
padding: 0.75rem 0.5rem !important;
margin-bottom: 0.5rem !important;
border-bottom: 1px solid rgba(0,0,0,0.1) !important;
position: relative !important;
min-height: 70px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* 确保链接不会重叠 */
.forum_a {
display: block !important;
padding: 0.75rem 0.5rem !important;
position: relative !important;
text-decoration: none !important;
background: #fff !important;
}
.forum_a h3 {
padding-right: 80px !important;
margin: 0 0 0.3rem 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* 统计数字位置固定 */
.y.f_count {
position: absolute !important;
right: 0.5rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
text-align: right !important;
background: rgba(255,255,255,0.9) !important;
padding: 0.2rem 0.5rem !important;
border-radius: 3px !important;
}
/* 防止文字溢出 */
* {
max-width: 100% !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}
`;
// 插入自定义样式
const styleElement = document.createElement('style');
styleElement.textContent = customCSS;
document.head.appendChild(styleElement);
// 防止其他脚本修改样式，使用防抖
const debouncedReapplyStyles = debounce(() => {
setViewport();
if(!document.head.contains(styleElement)) {
document.head.appendChild(styleElement);
}
}, 100);
window.addEventListener('load', debouncedReapplyStyles);
// 定期检查样式是否被移除
setInterval(debouncedReapplyStyles, 1000);
})();