최근 기사 댓글 기능인 미니 프로그램 웹뷰에 내장된 h5 페이지를 작성하던 중 호환성 문제도 많이 겪었고, 모델별로 성능도 매우 일관적이지 않아 다음과 같은 문제를 정리했습니다. : 나중에 검토할 수 있도록 녹음하세요.
1. 날짜 문제yyyy-mm-dd hh:mm:ss의 경우 이 형식은 iOS 시스템에서 인식되지 않습니다.
시간을 포맷하면 브라우저 측에서는 잘 처리되지만 휴대폰에 도달하면 NAN 또는 null이 됩니다. 이 경우 iOS 시스템에서는 이러한 유형의 시간을 변환할 수 없습니다.
let date = new Date('2019-02-28 18:33:24') // null`해결 방법은 yyyy/mm/dd hh:mm:ss 형식으로 변환하는 것입니다.
교체(//-/g, /)2. 키보드를 치우면 페이지가 멈춰서 돌아오지 않습니다.
iOS12에서는 키보드를 수납하면 페이지가 멈춤 현상이 발생하고, 페이지를 살짝 움직이면 원래대로 돌아가는 현상을 발견했습니다.
이런 문제에 대해서는 인터넷에서 여러 해결 방법을 찾아보았는데, 해결 방법은 대략적으로 블러 현상이 발생하는 동안 페이지를 스크롤하는 것이었습니다.
window.scrollTo(0, 스크롤);
하지만 매우 심각한 문제가 있습니다. 페이지에 조작해야 할 버튼이 있는 경우(예: 댓글 입력 상자 + 게시 버튼), 텍스트를 입력한 후 게시를 클릭하고, 클릭 이벤트가 발생하면 페이지가 실행됩니다. 먼저 흐림 이벤트를 실행하고 키보드가 뒤로 물러납니다. . . . 버튼을 클릭해도 아무 일도 일어나지 않습니다.
해결책: 클릭 이벤트를 ontouchstart로 변경하면 이 문제를 해결할 수 있습니다. ontouchstart 이벤트는 클릭 이벤트 트리거보다 낫습니다.
3. iOS12의 WeChat 애플릿 웹뷰에서 키보드가 들어가고 페이지 하단이 비어 있게 됩니다.이 문제는 페이지 스크롤 자동 설정으로 인해 발생하는 것으로 의심됩니다.
4. iPhone 수정이 실패하여 일부 시스템에서 텍스트 영역 커서가 이동합니다.해결 방법: 모든 형제 요소는 절대 요소가 되고 상위 요소는 Overflow:auto;
상위 요소: 높이: 100vh; 형제 요소: 위치: 절대: 0; 오른쪽: 0; 패딩 하단: 10px, Z-색인: 15. 키보드가 입력 상자를 차단합니다.
고정을 사용하여 입력 상자를 하단에 고정한 경우 키보드를 올리면 iPhone에서 고정이 실패하여 페이지가 스크롤되며 일부 모델에서는 입력 상자가 스크롤됩니다. 때때로 키보드에 의해 차단됩니다. 이 가끔 문제는 매우 불친절합니다.
해결책: 고정 레이아웃 사용을 포기하십시오. 페이지에 스크롤이 있는 경우 절대를 포기하십시오. 강제로 절대값을 사용해야 한다면 커서 오프셋에 대한 이전 기사를 참조하십시오.
Flex 레이아웃을 사용하는 것이 권장되며 호환성이 해결됩니다.
물론 위의 문제가 발생한다면 제품 디자인이 매우 불합리하다는 뜻입니다. 필요하다면 키보드로 입력을 밀어 올릴 필요가 없는 디자인으로 변경해야 합니다. 완벽하지는 않습니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.