Question

我正在建立一个快速响应的网站（http://dev.searsdavies.co.uk/quadrant-new/）

布局需要一组按钮才能坐在屏幕的死角中供纵向平板电脑使用，此布局在屏幕宽度为768px时触发，并保持在414px以下。按钮位置：绝对位于所有其他内容的顶部，因为它们需要在网站的较大和较小版本上捕捉到底部。

这些框在Chrome和Firefox中表现得非常完美，但是Safari会将它们放在页面上太高的位置。

完整网站在上面，这里是相关的CSS

.row.footer {
    bottom: 49%;
    transform: translate(0, 50%);
    position: absolute;
    padding: 0 50px;
}

.row.full-width {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

还有一个条件查询可以阻止横向电话和类似设备上的布局变得太浅：

@media screen and (max-height: 800px) and (max-width:768px) and (min-width:415px) {

        .row.footer {
            top:352px ;
            bottom:auto ;
            transform:none
        }
    }

.side-img {
        height: 50vh;
        min-height: 400px;
        background-size: cover;
        position: relative;
    }
    .main-content {
        height: 50vh;
        min-height: 400px;
    }

Answer 1

这里有一些事情。

首先，prefix your properties;您使用的是transform但不前缀;它们不适用于Safari。

webkit-transform: translate(x,x);

其次，您可以在@media查询 - max-height: 800px中使用此功能。这意味着do this stuff when the browser is **less than** 800px in height - demo 。

真的您想要针对纵向平板电脑（example的iPad）的@media规则发表什么，是{ {1}} 768 width）？

解决问题：

1）为1024 height

添加前缀

2）修复您的transforms规则

3）删除@media规则

4）删除/调整bottom: auto规则

位置：在野生动物园中绝对表现不同

1 个答案: