html – WordPress Twenty Seventeen Header Scroll Mobile Zooms in

前端之家收集整理的这篇文章主要介绍了html – WordPress Twenty Seventeen Header Scroll Mobile Zooms in前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的网站上使用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相关文章