Javascript 在移动屏幕上没有弹出div

我有两个div

<div class="one">contains a massive image with fixed height and width</div>
<div class="two">contains popup</div>

.one {
        background-image: url("image");
        background-position: left top; 
        background-repeat: no-repeat;
        background-color: transparent;

        height:900px;
        width:1000px;

        margin:0 auto;
}

.overlay {
    background:rgba(0,0,0,0.8);
    bottom:0;
    left:0;
    position:fixed;
    right:0;
    top:0;
    z-index:4;
    display: block;
    opacity: 1;

    }

    .popupwrapper{
        background:white;
        height: 100%;
        max-width: 300px;
        width: 100%;
        max-height: 320px;
        text-align: center;
        padding:3em;
        margin: 0 auto;
        margin-top: 120px;

        //for small screens
        margin-left: 40px;  
    }

包含固定高度和宽度的海量图像
包含弹出窗口
.一{
背景图片：url（“图片”）；
背景位置：左上；
背景重复：无重复；
背景色：透明；
高度：900px；
宽度：1000px；
保证金：0自动；
}
.覆盖{
背景：rgba（0,0,0,0.8）；
底部：0；
左：0；
位置：固定；
右：0；
排名：0；
z指数：4；
显示：块；
不透明度：1；
}
爆竹先生{
背景：白色；
身高：100%；
最大宽度：300px；
宽度：100%；
最大高度：320px；
文本对齐：居中；
填充：3em；
保证金：0自动；
边缘顶部：120px；
//对于小屏幕
左边距：40px；
}

我的问题是，当我在手机上查看div“one”时，它的大小是固定的，因此弹出窗口实际上并不显示在屏幕中央，而是如何显示在笔记本电脑屏幕上。我试着用小屏幕上留下的边距来修复这个问题，它在移动屏幕中间以DIV为中心。然而，当我滚动时，因为div有一个左边距，所以滚动时它不会位于中间

此外，这似乎只发生在Safari中（没有左边空白或固定的最大宽度，div在移动屏幕上看起来很大），但在Chrome中可以吗

两个问题：

如何阻止div滚动？我尝试过溢出，但它仍然会滚动

是否有针对Safari的CSS攻击？我试过很多，但似乎都不管用

---

我从您的问题中了解到，您希望显示一个始终位于屏幕中间和其他部分之上的覆盖图

如果模态的大小是固定的，则可以这样做：

.one {
  position: absolute;
  top: 50%;
  left: 50%;

  margin: -450px 0 0 -500px;

  width: 1000px;
  height: 900px;
}

例如：

对于移动设备来说，只有覆盖层的大小才是最大的。。也许可以使用媒体查询在手机屏幕上显示不同的大小

任何元素的高度都可能超过其实际高度。这就是为什么会出现滚动

---

您是否使用了最大宽度：1000px@GauravRai我试过，它对于移动屏幕来说太大了。出于某种原因，当我在iPhone上的Chrome中使用它时，弹出窗口与iPhone屏幕完美匹配，但当我在Safari中使用它时，弹出窗口确实被放大了。Safari版本5.1+？我猜是iOS 9.2上的最新版本。它还使字体与Chrome完全不同@GauravRaiI已经按照您的建议进行了尝试，但它仍然会滚动，并且与滚动不相称：（由于某些原因，当我在iPhone上的Chrome中使用它时，弹出窗口与iPhone屏幕完美匹配，但当我在Safari中使用它时，弹出窗口确实被放大了。您可以控制移动设备如何处理应用程序的渲染。以下是有关移动设备中的viewport meta的更多信息：