要增加移动设备上弹出面板的宽度，你可以使用CSS来改变弹出面板的样式。下面是一个示例代码，演示如何通过CSS来增加弹出面板的宽度：

HTML代码：

  


  

    

      

        
点击此处
      
      

        
弹出面板
      
    
  

CSS代码（styles.css）：

.flip-card {
  background-color: #f1f1f1;
  width: 300px; /* 设置弹出面板的初始宽度 */
  height: 200px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
  
  /* 设置移动设备上弹出面板的宽度 */
  width: 500px;
}

在上述代码中，我们通过设置.flip-card-back的宽度为500px来增加移动设备上弹出面板的宽度。你可以根据需要调整这个值来改变宽度。