可通过开发者工具临时调试、浏览器插件注入css或配置用户样式表三种方式优化智谱清言移动端显示:调试可实时修改间距与检查overflow隐藏问题;stylus插件能永久隐藏侧边栏;用户样式表需手动更新类名以适配官网结构变更。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

你想让智谱清言官网在手机浏览器里显示更紧凑的布局、隐藏冗余侧边栏、或调整按钮尺寸适配拇指点击,但网页端本身不提供样式开关——必须通过开发者工具临时调试或注入自定义CSS生效。
用开发者工具实时调试移动端样式
打开智谱清言官网(chatglm.cn)→ 在手机浏览器中访问,或用Chrome桌面版按F12 → 点击右上角“切换设备仿真”图标(?)→ 选择iPhone 14 Pro或“Responsive”手动设为375×812分辨率。
按Ctrl+Shift+C(Mac为Cmd+Shift+C)激活元素选择器 → 点击页面顶部导航栏 → 右侧“Styles”面板中找到类似header { padding: 1.5rem 2rem; }的规则 → 直接双击数值,把1.5rem改成0.75rem,回车立即生效。
这一步改完不用刷新,但关闭DevTools后失效;若发现某按钮文字被截断,不要盲目调大font-size,先检查父容器是否设置了overflow: hidden——它会静默裁剪内容,比字体小更难排查。
注入自定义CSS覆盖默认样式
方法一:使用浏览器插件(推荐Stylus)
安装Stylus插件 → 点击插件图标 → “写新样式” → 在“适用网址”填https://chatglm.cn/* → 在编辑区粘贴:
@media (max-width: 768px) { .sidebar { display: none !important; } .main-content { margin-left: 0; } }
点击保存,刷新页面即可看到左侧栏消失、主内容区撑满全屏。【必须加!important,否则智谱清言内联样式权重更高,你的CSS会被忽略】
方法二:控制台直接执行(仅本次有效)
按F12 → 切换到Console标签页 → 粘贴以下代码后回车:
const style = document.createElement('style'); style.textContent = '@media (max-width: 768px) { button[type="submit"] { padding: 12px 24px !important; font-size: 16px !important; } }'; document.head.appendChild(style);
这段代码会强制给所有提交按钮加上移动端友好尺寸,但页面刷新即失效。
永久生效:通过用户样式表(仅Chrome/Edge)
第一步:关闭所有Chrome窗口
第二步:新建文本文件,命名为chatglm-mobile.css,内容为:
@media (max-width: 768px) { .chat-input-area { min-height: 60px; } .message-bubble { max-width: 85%; } }
第三步:打开Chrome设置 → 搜索“user agent stylesheet” → 进入“Appearance” → 点击“Customize fonts”下方的“Web content” → 找到“User Style Sheet”,点击“Choose file”选中刚保存的CSS文件 → 重启Chrome。
此后每次访问chatglm.cn,在移动视口下都会自动加载该样式。⚠️ 若某天官网结构更新导致类名变更(如.message-bubble改为.ai-response),此文件将不再生效,需手动检查Elements面板更新选择器。











