iOS 위 챗 H5 페이지 고무 리 턴 효과 의 구덩이 밟 기 기록

3982 단어 iosh5리 턴
업무 수요
최근 개 발 된 프로젝트 의 일 부 는 위 챗 공식 번호 와 관련 된 H5 페이지 로 안 드 로 이 드 엔 드 위 챗 에서 페이지 효과 에 이상 이 없 지만 iOS 엔 드 위 챗 이 많 고 적 으 면 예상 치 못 한 버그 가 발생 할 수 있 습 니 다.이번 에는 주로 모 바 일 H5 페이지 가 iOS 에서 발생 하 는 고무 리 턴(고무줄 효과)문 제 는 관련 기록 을 작성 해 비슷 한 문제 에 부 딪 힌 학생 들 에 게 도움 이 되 기 를 바란다.
🐕프로젝트 1:inobounce.js 사용
inobounce.js   github 주소
...에 있다 html 홈 페이지 의 header 탭 에 inbounce.js 를 도입 합 니 다.즉, 。이 파일 을 도입 하면 iOS 엔 드 전체 페이지 가 미 끄 러 지 거나 굴 러 갈 수 없습니다.굴 러 가 는 요소 가 굴 러 가 는 효 과 를 실현 하려 면 스크롤 영역 에 고정 적 인 높이,즉 height,max-height 를 설정 하 는 동시에 overflow:auto 를 설정 하여 페이지 가 미 끄 러 지 는 것 을 실현 해 야 합 니 다.iOS 엔 드 페이지 스크롤 에 카드 가 걸 리 는 것 을 방지 하기 위해 서 는 스크롤 영역 설정-webkit-over flow-scrolling:touch 속성 이 필요 합 니 다.   

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>inobounce</title>
		<script src="inobounce.js"></script>
		<style>
			ul {
				height: 115px;
				border: 1px solid gray;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>List Item 1</li>
			<li>List Item 2</li>
			<li>List Item 3</li>
			<li>List Item 4</li>
			<li>List Item 5</li>
			<li>List Item 6</li>
			<li>List Item 7</li>
			<li>List Item 8</li>
			<li>List Item 9</li>
			<li>List Item 10</li>
		</ul>
	</body>
</html>
🐒 프로젝트 2:CSS 스타일 처리(추천)
우연히 iOS 쪽 에서 공식 번호 인 H5 활동 페이지 를 열 었 는데 이른바 고무 리 턴 효과 가 나타 나 지 않 아 이 효 과 를 이용 해 iOS 쪽 홈 페이지 에서 발생 하 는 고무 리 턴 효 과 를 해결 할 수 있 을 까 하 는 생각 이 들 었 다.최종 적 으로 이 방법 을 시도 하면 iOS 엔 드 페이지 가 고정 되 고 고무 리 턴 효과 가 발생 하지 않 습 니 다.시스템 버 전 iOS 13+의 장치 에 서 는 고무줄 효과 가 해결 되 었 으 며,시스템 버 전 iOS 12+의 장치 에 서 는 시도 되 지 않 았 으 며,추 후 iOS 12+의 애플 폰 을 찾 아 진일보 한 테스트 를 진행 할 예정 이 며,그 다음 에 테스트 결 과 를 보충 할 예정 이다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>iOS    </title>
	</head>
	<body>
		<!--     -->
		<div id="app"></div>
	</body>
</html>
주요 CSS 코드:

/*     */
* {
	margin: 0;
	padding: 0;
}
/*      */
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	box-sizing: border-box;
	position: relative;
}
/*      */
#app {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}
🐬요약:
전체적으로 말 하면 두 가지 방안 을 나 는 실제 개발 에서 모두 시도 했다.방안 은 위 챗 에서 H5 홈 페이지 를 조회 할 때 고무 리 턴 효 과 를 완벽 하 게 해결 할 수 있다.H5 페이지 가 iOS 엔 드 위 챗 에서 권한 을 위 임 받 아 점프 할 때 아래쪽 에 네 비게 이 션 바 가 있 는데 이때 네 비게 이 션 바 가 가 려 질 수도 있 고 네 비게 이 션 바 양쪽 단 추 를 누 르 면 반응 이 없다.Safari 브 라 우 저 에서 H5 페이지 를 열 때 웹 페이지 의 맨 위 주소 표시 줄 과 아래쪽 메뉴 표시 줄 이 어느 정도 가 려 져 체험 효과 가 좋 지 않 아 결국 이 방안 은 pass 에 의 해 삭제 되 었 습 니 다.방안 둘 째 는 내 가 실제 업무 에서 사용 한 것 으로 리 턴 효과 가 어느 정도 개선 되 었 다.체험 효과 가 방안 에 비해 크게 향상 되 었 다.
만약 에 페이지 에 위 챗 권한 수여 와 페이지 경로 의 전환 이 있 으 면 iOS 측 위 챗 이 열 린 웹 페이지 밑 에 네 비게 이 션 바 가 하나 더 생 길 것 입 니 다.마찬가지 로 안 드 로 이 드 측 위 챗 에 유사 한 네 비게 이 션 바 가 나타 나 지 않 을 것 입 니 다.위 챗 권한 수여 와 페이지 전환 이 없 으 면 두 가지 방안 을 모두 선택 할 수 있 습 니 다.위 챗 권한 이 있 으 면 사용 방안 2 를 추천 합 니 다.
iOS 위 챗 H5 페이지 의 고무 리 턴 효과 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.iOS 위 챗 H5 페이지 의 고무 리 턴 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
모 바 일 H5 앱 의 쓰기 인 스 턴 스 불 러 오기(IOS,android)
Vue 3 사용 루트 VueRouter 4 의 간단 한 예시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage