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

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

https://2017.wordpress.net/

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

【问题讨论】:

  • 您在哪种设备上看到这种行为?
  • iPhone 和安卓

标签: html wordpress css


【解决方案1】:

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

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

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

【讨论】:

  • 这行得通,但是我仍然需要图像处于固定位置,这样我才能制作视差图像
  • @user979331,在这种情况下,只需为移动设备设置relative 位置,桌面上仍然会有视差。无论如何,视差在移动设备上感觉不稳定且缓慢。
【解决方案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;
}

类似问题:

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

【讨论】:

    【解决方案3】:

    你可以试试下面的css:

    html, body {
        height:100%;
    }
    html {
        overflow: hidden;
    }
    
    body {
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
    }
    

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-06-20
      • 1970-01-01
      • 2023-03-30
      • 1970-01-01
      • 1970-01-01
      • 2019-12-18
      • 1970-01-01
      相关资源
      最近更新 更多