Question

我正在尝试使用显示屏幕时加载的弹出窗口。它在台式机上运行良好，但是从移动设备打开时，弹出窗口的大小不会改变。在移动设备上，不会显示整个弹出窗口。我为您提供了我使用过的CSS属性。

请告诉我如何调整窗口大小以适合移动设备，以帮助您。

#ac-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .7);
    z-index: 1001;
}
#popup {
    width: 555px;
    height: 375px;
    background: #9152f8;
    border: 5px solid #000;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: #64686e 0px 0px 3px 3px;
    -moz-box-shadow: #64686e 0px 0px 3px 3px;
    -webkit-box-shadow: #64686e 0px 0px 3px 3px;
    position: relative;
    top: 150px;
    left: 375px;
}

如何放置可以调整大小并适合设备屏幕的值？

根据答复将其添加到文档头中的视口，但现在根本不会加载弹出窗口。

           @media only screen and (max-width: 600px) {
       #ac-wrapper {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, .7);
                z-index: 1001;
            }

       #popup {
             width: 555px;
                height: 375px;
                background: #9152f8;
                border: 5px solid #000;
                border-radius: 25px;
                -moz-border-radius: 25px;
                -webkit-border-radius: 25px;
                box-shadow: #64686e 0px 0px 3px 3px;
                -moz-box-shadow: #64686e 0px 0px 3px 3px;
                -webkit-box-shadow: #64686e 0px 0px 3px 3px;
                position: relative;
                top: 150px;
                left: 375px; 
        }
  }

Answer 1

可以完成此操作的一种方法是使用viewport units，而不是对width和height属性进行硬编码。例如：

#popup {
    width: 50vw;
    height: 30vh;
}

您可能要考虑的另一件事是将media queries添加到CSS代码中。

#ac-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .7);
  z-index: 1001;
}
#popup {
  width: 555px;
  height: 375px;
  background: #9152f8;
  border: 5px solid #000;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  box-shadow: #64686e 0px 0px 3px 3px;
  -moz-box-shadow: #64686e 0px 0px 3px 3px;
  -webkit-box-shadow: #64686e 0px 0px 3px 3px;
  position: relative;
  top: 150px;
  left: 375px;
}
@media only screen and (max-width: 600px) {
  #popup {
      width: 400px;
      height: 250px;
   }
}

为了获得最佳的用户体验，使用媒体查询可能是明智的，因为这将使您获得更多控制权。

Answer 2

有两种不同的解决方法，就我个人而言，我只是使用媒体查询。只需设置要调整弹出窗口大小的宽度即可。

类似这样的东西：

 @media only screen and (max-width: 600px) {

       #popup {
            /*new sizes here*/ 
        }
  }

请确保在您的<head>部分中使用此标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

从移动设备打开时如何调整弹出窗口的大小

2 个答案: