如何让承载Webamp播放器的DIV在移动端及桌面端自适应？

一、修复HTML基础结构问题 #

你的代码存在两处影响viewport生效的错误：

• <head>标签未正确闭合，需替换为</head>
• 你提及已添加viewport标签，但提供的代码中缺失，需补充到头部

修复后的头部代码：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>CodePen - WebAmp with Skin</title>
</head>

二、添加响应式CSS适配 #

Webamp是固定尺寸的Winamp模拟播放器，仅靠viewport无法实现自适应，需通过CSS控制容器布局与缩放：
在<head>中插入样式代码：

<style>
  body {
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
  }

  #app {
    width: 100%;
    max-width: 400px; /* 可根据需求调整桌面端最大宽度 */
    transform-origin: top center;
  }

  /* 小屏移动端缩放播放器，避免超出屏幕 */
  @media (max-width: 360px) {
    #app {
      transform: scale(0.85);
    }
  }
</style>

三、优化Webamp初始化配置 #

针对移动端特性调整初始化参数，提升交互体验：

new Webamp({
    initialTracks: [{
        metaData: {
            artist: "The Boy is Mine",
            title: "Brandy & Monica",
        },
        url: "https://sadhost.neocities.org/music/Boy.mp3",
    }],
    initialSkin: {
        url: "https://sadhost.neocities.org/etc/TetAtck.wsz"
    },
    enableDrag: false, // 禁用桌面端窗口拖动，移动端无需此功能
    touchSupport: true, // 启用触摸交互支持
}).renderWhenReady(app);

完整修复代码 #

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>CodePen - WebAmp with Skin</title>
  <style>
    body {
      margin: 0;
      padding: 1rem;
      box-sizing: border-box;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
    }

    #app {
      width: 100%;
      max-width: 400px;
      transform-origin: top center;
    }

    @media (max-width: 360px) {
      #app {
        transform: scale(0.85);
      }
    }
  </style>
</head>

<body>
<div id="app"></div>
<script src="https://unpkg.com/webamp"></script>
<script>
new Webamp({
    initialTracks: [{
        metaData: {
            artist: "The Boy is Mine",
            title: "Brandy & Monica",
        },
        url: "https://sadhost.neocities.org/music/Boy.mp3",
    }],
    initialSkin: {
        url: "https://sadhost.neocities.org/etc/TetAtck.wsz"
    },
    enableDrag: false,
    touchSupport: true,
}).renderWhenReady(app);
</script>
</body>
</html>

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