html – WordPress Twenty Seventeen Header Scroll Mobile Zooms in

概述我在我的网站上使用WordPress Twenty Seventeen,我在手机上的标题图片有问题.当我开始滚动时,标题图像有点放大,我试图谷歌这个问题,但没有提出任何东西,我已经尝试通过CSS代码,并没有看到任何转换或元素在我改变时检查他们,这是一个示例网站： https://2017.wordpress.net/ 当您开始滚动时,标题图像是缩放的缩放,是否有防止这种情况,因此它在滚动之前保持相 我在我的网站上使用wordpress Twenty Seventeen,我在手机上的标题图片有问题.当我开始滚动时,标题图像有点放大,我试图谷歌这个问题,但没有提出任何东西,我已经尝试通过CSS代码,并没有看到任何转换或元素在我改变时检查他们,这是一个示例网站：

https://2017.wordpress.net/

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

解决方法 发生这种情况是因为mobile-Chrome计算地址栏到视口高度,在滚动网页时,地址栏也会滚动,可见区域动态地改变它的高度.

例如.在320px X 360px屏幕上,在带有地址栏的mobile-Chrome上,视口高度为564px,在地址栏消失后滚动后,视口高度变为620px.

视口高度与地址栏

视口高度没有地址栏

现在.wp-custom-header中的图像采用最小高度：100％;高度：100％将动态改变高度,因此图像在滚动时改变它的尺寸.

更好的方法是在媒体查询中以像素为单位修复图像的高度.

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

类似的问题：

css3-100vh-not-constant-in-mobile-browser

总结

以上是内存溢出为你收集整理的html – WordPress Twenty Seventeen Header Scroll Mobile Zooms in全部内容，希望文章能够帮你解决html – WordPress Twenty Seventeen Header Scroll Mobile Zooms in所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。