Wordpress Tween Header Scroll 모바일 줌인

Wordpress Tween Header Scroll 모바일 줌인

웹 사이트에서 WordPress Tweenty Seventen을 사용하고 있는데 모바일에서 헤더 이미지에 문제가 있습니다.스크롤을 시작하면 헤더 이미지가 확대됩니다.이 문제를 구글로 검색하려고 했지만 아무 것도 나오지 않았습니다.CSS 코드를 확인해도 트랜지션이나 요소가 변경되지 않습니다.다음은 예를 제시하겠습니다.

https://2017.wordpress.net/

스크롤을 시작할 때 헤더 이미지가 짧습니다만, 스크롤 전에 같은 사이즈를 유지할 수 있도록 할 수 있는 것입니까?

이는 모바일 크롬이 주소 바를 뷰포트 높이로 계산하고 웹 페이지를 스크롤하는 동안 주소 표시줄도 스크롤하여 표시 영역이 동적으로 변경되기 때문입니다.

예:320px X 360px화면, 주소 표시줄이 있는 모바일 디스플레이에서 뷰포트의 높이는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-mobile-in-mobile-module

더하다position: relative;엄호할 수배하여img:

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

현재 위치는fixed와 조합하여object-fit: cover;가 줌 효과를 일으킵니다.

다음 css를 시도해 보십시오.

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

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

이렇게 하면 브라우저가 주소 표시줄을 숨길 수 없습니다.그래서 우리는 스크롤을 하면서 점프를 없앨 것이다.

당신의 URL에서 시도해보니 잘 되고 있습니다.적절한 미디어 질의에 이것을 사용할 것을 제안합니다.

언급URL : https://stackoverflow.com/questions/45668170/wordpress-twenty-seventeen-header-scroll-mobile-zooms-in