智谱清言怎么修改网页的移动端样式

风瑶同学_4970

风瑶同学_4970

2026-10-09

176人浏览

原创

可通过开发者工具临时调试、浏览器插件注入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会被忽略】

方法二:控制台直接执行(仅本次有效)

智谱清言
智谱清言

智谱清言(ChatGLM)是智谱AI推出的新一代AI助手,基于GLM大模型打造,提供AI问答、智能写作、代码辅助、文档解读、AI绘画、视频生成、智能搜索和智能体等能力。可广泛应用于学习、办公、创作、编程开发和知识管理等场景,支持网页端、移动端及开放平台使用。

下载

按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面板更新选择器。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
智谱清言使用教程大全
智谱清言使用教程大全

智谱清言专题提供全面的使用教程与功能解析,涵盖账号注册、网页版入口、App下载安装、AI问答、内容创作、文档处理、学习办公辅助等核心功能,帮助用户快速掌握智谱清言的使用方法,提升工作、学习与创作效率。

2026.06.09

250

10

智谱清言提示词大全
智谱清言提示词大全

本专题围绕智谱清言Prompt提示词展开,系统讲解高质量提问技巧、场景化提示词模板、内容创作Prompt、办公学习Prompt以及AI对话优化方法,帮助用户获得更精准、更专业的回答结果。

2026.06.09

73

10

智谱清言AI写作教程
智谱清言AI写作教程

本专题聚焦智谱清言AI写作能力,涵盖文章创作、SEO内容生成、新媒体运营、自媒体写作、电商文案、广告推广文案以及办公写作等场景,帮助用户利用AI提升内容生产效率与创作质量。

2026.06.09

600

10

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

2026.10.08

0

20

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

120

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

100

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

80

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

80

26

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

2026.09.29

100

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.6万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.4万人学习