Wordpress 二十七页眉滚动移动放大答案

【问题标题】：Wordpress Twenty Seventeen Header Scroll Mobile Zooms inWordpress 二十七页眉滚动移动放大
【发布时间】：2018-01-21 22:01:15
【问题描述】：

我在我的网站上使用 WordPress 27 并且我在移动设备上遇到了我的标题图片问题。当我开始滚动时，标题图像有点放大，我试图用谷歌搜索这个问题，但什么也没想到，我试过浏览 CSS 代码，但看不到任何转换或元素在我改变时检查它们，这是一个示例站点：

当您开始滚动时，标题图像会缩小，是否有办法防止这种情况发生，使其在滚动前保持相同的大小？

【问题讨论】：

【解决方案1】：

将position: relative;添加到您的封面img：

.wp-custom-header img {
    position: relative;
}

当前位置是fixed，它与object-fit: cover;一起导致了缩放效果。

【讨论】：

【解决方案2】：

发生这种情况是因为 mobile-chrome 将地址栏计算为视口高度，并且在滚动网页时地址栏也会滚动，并且可见区域会动态更改其高度。

例如在320px X 360px 屏幕上，在带有地址栏的mobile-chrome 上，视口的高度为564px，当地址栏消失时滚动后，视口的高度变为620px。

带地址栏的视口高度

不带地址栏的视口高度

现在image 在.wp-custom-header 中采用min-height:100%;height:100%，这将动态改变高度，因此图像在滚动时会改变它的尺寸。

更好的方法是在media queries 中固定图像的高度（以像素为单位）。

.has-header-image .custom-header-media img{
    height: 620px;
    min-height: 0;
}

类似问题：

【讨论】：

【解决方案3】：

你可以试试下面的css：

html, body {
    height:100%;
}
html {
    overflow: hidden;
}

body {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}

这将防止浏览器隐藏地址栏。所以我们将在滚动时摆脱跳跃。

我已在您的网址中尝试过此操作，并且可以正常工作。我建议在适当的媒体查询中使用它。

【讨论】：