代码块中交易小部件的页面宽度发生变化

Question

我正在构建一个硬币网站，并希望包含来自 Jupiter 的交易小部件。 我复制了 Jupiter 提供的代码（如下），尽管小部件本身运行良好，但它改变了我的页面宽度。 我尝试了各种选项，但未能解决它。

这是页面标题中的代码：

<script src='https://terminal.jup.ag/main-v3.js'></script> 小部件的代码片段作为代码块插入到页面上：

<div style="width: 100%; margin: 0 auto;">
  <div id="integrated-terminal"></div>
  <script>
    window.Jupiter.init({
      displayMode: "integrated",
      integratedTargetId: "integrated-terminal",
      endpoint: "https://api.mainnet-beta.solana.com",
      formProps: {
        fixedOutputMint: true,
        swapMode: "ExactIn",
        initialOutputMint: "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263",
      },
    });
  </script>
</div>

我尝试更改 div 样式，将其完全删除，更改部分宽度。

Answer 1

我已经在

JS Fiddle 上测试了你的代码，它似乎运行良好。即使代码在本地运行也能按预期工作。

您可以尝试的一件事是设置

max-width: x; 属性：

<script src='https://terminal.jup.ag/main-v3.js'></script>
<div style="width: 100%; max-width: 100%; margin: 0 auto;">
  <div id="integrated-terminal"></div>
  <script>
    window.Jupiter.init({
      displayMode: "integrated",
      integratedTargetId: "integrated-terminal",
      endpoint: "https://api.mainnet-beta.solana.com",
      formProps: {
        fixedOutputMint: true,
        swapMode: "ExactIn",
        initialOutputMint: "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263",
      },
    });
  </script>
</div>