Wordpress Twenty Seventeen Header Scroll Mobile Zooms in

Question

我在我的网站上使用WordPress Twenty Seventeen,我在手机上的标题图片有问题.当我去开始滚动,标题图片有点放大式,我试图谷歌这个问题,但什么也没有上来了,我试图通过CSS代码去,并没有看到任何过渡或元素改变,当我检查他们,这是一个示例网站:

https://2017.wordpress.net/

当您开始滚动时,标题图像是缩放放大,是否有防止这种情况,因此它在滚动之前保持相同的大小？

Answer 1

发生这种情况是因为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;
}

类似的问题:

css3-100vh - 不恒定在移动浏览器