如何在网页中嵌入适配移动设备、可自动调整尺寸的报表

完全可以通过HTML配合简单的CSS配置实现该需求，具体操作步骤如下：

• 第一步：添加移动端视口适配基础配置
  将以下代码放到页面<head>标签内，确保页面宽度可以匹配设备屏幕尺寸：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• 第二步：给报表嵌入容器添加响应式样式
  如果是通过<iframe>嵌入的第三方报表，给iframe外层包裹自定义响应式容器即可，示例代码如下：

  <style>
  .responsive-report {
    position: relative;
    width: 100%;
    height: 0;
    /* 可根据报表实际高宽比调整该数值，横版报表设为60%~80%，竖版报表设为120%~160% */
    padding-bottom: 130%;
  }
  .responsive-report iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
  </style>
  
  <!-- 报表嵌入结构 -->
  <div class="responsive-report">
    <iframe src="你的报表访问地址"></iframe>
  </div>
  

• 第三步：页面直出表格类报表额外适配
  如果是直接在页面内渲染的表格形态报表，给表格外层加横向滚动容器，避免多列布局超出屏幕：

  <style>
  .table-wrap {
    width: 100%;
    overflow-x: auto;
  }
  </style>
  
  <div class="table-wrap">
    <table>
      <!-- 报表表格内容 -->
    </table>
  </div>
  

参考效果截图：

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