前言

支持手机端 pc端自适应，可以在博客文章页添加探针在线浏览。

探针主题：Cloudflare Worker部署哪吒探针主题之世界地图基于 Amzayo 设计的主题进行二次修改

效果图

教程

以halo博客为例

安装插件

在插件页面安装html插件

嵌入探针

将下面代码使用html插件导入到文章页

<style>
  .responsive-iframe-container {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: auto;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  }

  .responsive-iframe-container iframe {
    width: 1200px;
    height: 800px;
    border: none;
    transform: scale(0.7);
    transform-origin: top left;
  }

  @media (max-width: 768px) {
    .responsive-iframe-container iframe {
      width: 100%;
      height: 100vh; /* 根据需要设置具体高度 */
      transform: none; /* 手机端取消缩放 */
    }
  }
</style>

<div class="responsive-iframe-container">
  <iframe src="https://探针地址" loading="lazy"></iframe>
</div>