我正在使用 ratchet 制作一个 html 移动网站。我一直在使用 chrome 设备模式来测试应用程序,模态按预期工作,它向下滑动并且只覆盖屏幕的一半但在 ios 和 android 上它不会固定在顶部而是向下滑动到中间。
代码是:
.modal.active {
height: 50%;
opacity: 1;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(0,50%,0);
-ms-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
.modal {
position: fixed;
top: 0;
z-index: 11;
width: 100%;
min-height: 50%;
overflow: hidden;
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s,opacity 1ms .25s;
-moz-transition: -moz-transform .25s,opacity 1ms .25s;
transition: transform .25s,opacity 1ms .25s;
-webkit-transform: translate3d(0,-100%,0);
-ms-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
你能在这里看到任何可以让它在移动设备上表现不同的东西吗?
最佳答案
可能的解决方案,使用媒体查询根据屏幕大小调整距顶部的模态边距
例如
@media screen and (max-width: 480px) {
.modal.active {
height: 50%;
opacity: 1;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(0,20%,0);
-ms-transform: translate3d(0,20%,0);
transform: translate3d(0,20%,0);
}
}
关于javascript - 模态在移动设备上的位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32549460/