如何使嵌入的PDF文件适配不同屏幕尺寸？

你当前的代码给embed标签设置了固定宽高（800px），这会导致PDF在小屏幕上超出可视区域，大屏幕上又留有过多空白，无法适配不同设备。可以通过以下修改实现响应式适配：

修改后的代码 #

<div 
    style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '100vh',
        padding: '20px',
        boxSizing: 'border-box'
    }}
>
      <embed
            id='pitch'
            src={pdfSample}
            type="application/pdf"
            style={{
                width: '100%',
                maxWidth: '800px',
                height: 'auto',
                minHeight: '600px',
                maxHeight: '90vh'
            }}
        />
</div>

关键修改说明 #

• 外层容器添加padding和boxSizing: border-box，避免PDF在小屏幕上紧贴边缘，提升视觉体验
• 移除embed的固定宽高，改用：
  • width: 100%让PDF占满容器的可用宽度
  • maxWidth: 800px限制PDF的最大宽度，避免在超大屏幕上显示过大
  • height: auto让高度随宽度等比缩放，保持PDF的原始比例
  • maxHeight: 90vh确保PDF不会超出视窗高度的90%，防止内容溢出屏幕
  • minHeight: 600px设置最小高度，避免在极小屏幕上PDF高度过矮影响阅读

针对竖版PDF的适配调整 #

如果你的PDF以竖版为主，可以优先适配高度，调整embed的样式：

style={{
    height: '90vh',
    maxHeight: '800px',
    width: 'auto',
    maxWidth: '100%',
    minWidth: '300px'
}}

这样PDF会优先占满视窗高度，宽度自动适配，同时限制最大高度和最小宽度，保证不同屏幕下的可读性。

内容的提问来源于stack exchange，提问作者ThatGuyNick