常见原因包括：HTML width/height 属性受 CSS（如 max-width、flex）干扰；PDF 渲染器忽略过小 height；未设 type="application/pdf" 或 MIME 错误导致降级；需用 aspect-ratio 或 padding-bottom 配合容器控制比例。
embed 嵌入 PDF 时 width/height 不生效的常见原因
直接写
和
却发现 PDF 显示区域被裁剪、拉伸或根本没变，大概率不是尺寸写错了，而是浏览器对
的渲染行为和 CSS 层叠规则在起作用。
的
和
是 HTML 属性，不是 CSS，但会被 CSS 的
、
或父容器
干扰
PDF 渲染器（如 Chrome 的 PDFium）会优先保证内容可读性，可能忽略过小的
，自动撑高容器
未设置
时，部分浏览器 fallback 到下载或空白，尺寸控制完全失效
某些 CDN 或代理服务返回错误 MIME 类型（比如
），导致浏览器不调用内置 PDF 渲染器，
/
形同虚设
固定宽高比（如 4:3、16:9）的可靠写法
想让 PDF 始终按比例缩放，不能只靠
和
两个绝对值——PDF 页面本身有原始尺寸，浏览器不会自动等比缩放内容。得靠 CSS 配合容器控制。
给
外层加一个
width="800"height="600"widthheightmax-widthoverflowdisplay: flexheighttype="application/pdf"text/plainwidthheightwidthheight
，用
aspect-ratio
（现代浏览器）或 padding-bottom hack（兼容旧版）锁定比例
width: 100%; height: 100%
，并确保父容器有明确高度（比如
min-height: 500px
）
必须显式声明
type="application/pdf"
，否则 Firefox 可能降级为 iframe 行为，Chrome 可能静默失败
示例：4:3 容器 + 自适应嵌入
embed 的 width/height 和 CSS width/height 混用时的冲突点
HTML 属性
width
和
height
与 CSS 的
width
/
height
同时存在时，行为不统一：
Chrome：CSS 优先级更高，HTML 属性会被覆盖（即使没写单位）
Firefox：HTML 属性仍有效，但若 CSS 写了
width: 100%
，会以该百分比为准，忽略 HTML 的像素值
移动端 Safari：对
height
支持不稳定，建议始终用 CSS 控制高度，并设
min-height
安全提示：不要用
width="100%"
+
height="100%"
在无高度约束的父容器里，容易导致高度塌陷为 0
调试 embed 尺寸问题的三步检查法
遇到尺寸异常，别急着改代码，先确认底层是否正常：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
打开 DevTools → Elements 面板，检查
width
和
height
属性（注意不是 computed 样式里的值）
Network 面板看 PDF 请求的 Response Headers 中
Content-Type
是否为
application/pdf
；如果不是，问题出在服务端配置
临时删掉所有 CSS，只留
相关文章
- JavaScript 中 var 变量提升与脚本作用域的深度解析
- 深入浅出解析css字体图标的制作和使用（代码分享）
- vue的less变量怎么写
- CSS浮动表格列如何实现_Float与display结合调整流程
- CSS如何处理移动端菜单的均分布局_利用flex:auto自动填充
- 如何处理“[Vue warn]: Property or method is not defined”错误
- D3.js创建物流地图
- nodejs属于后台语言么
- Bootstrap清除浮动clearfix用法 Bootstrap如何解决父元素高度塌陷
- CSS如何实现具有拖拽感的UI滑块_利用伪元素美化Range输入框css