奇思乎乎乎 iPhone 16e · 17 系列 · Air - 一束网址,折射万屏
100%

输入网址,立刻开始预览

预设:
自定义:

钉钉 PC 客户端内嵌网页适配

钉钉 PC 客户端内嵌网页(工作台应用、H5 微应用)有两个关键的窗体临界值:1024×726 和 975×600。开发者经常只在一个尺寸下调试,上线后在另一个尺寸下错位。

1024×726 是标准窗体的宽度。此时页面有充足空间展示左右分栏布局,适合工作台类的仪表盘应用。

975×600 是窄窗体的尺寸。用户在 Windows 上把钉钉窗口缩窄时触发。此时如果页面还是按 1024 布局,会出现横向滚动条或元素被挤压。

常见适配问题:

  • 固定 1024 宽度:写成 width: 1024px 而不是 max-width,在窄窗体下横向滚动;
  • 左右分栏比例失衡:窄窗体下侧边栏占用过多,主内容区被压缩到难以阅读;
  • 表格横向溢出:宽表格在 975px 下撑破容器,需要加 overflow-x: auto;
  • 字体太小或太大:钉钉 PC 客户端的默认字号和浏览器不同,需要单独校准。

在下方预览器输入你的工作台地址,两个尺寸同时对比,一眼看出布局差异。

常见问题

钉钉 PC 客户端的宽度是多少?
标准窗体 1024px,窄窗体 975px。用 max-width 而不是固定宽度就能同时适配两个尺寸。
为什么钉钉 PC 上正常但浏览器错位?
钉钉 PC 客户端的默认字体、滚动条宽度和浏览器不同,加上内嵌 WebView 会注入一些样式。建议在内嵌环境专门测试一遍。
钉钉 PC 有安全区吗?
没有移动端那种安全区。但顶部有钉钉自己的标题栏(约 40px),如果页面用了 fixed 定位要注意避让。

相关工具