회사에서는 네이티브 APP와 h5의 혼합 개발 프로젝트에 참여했는데, 프로젝트에서 h5 부분을 담당했습니다. 프로젝트에서 겪은 문제점을 다음과 같이 요약하겠습니다.
구체적인 질문 질문 1: 페이지 스크롤 막대 문제문제 설명
웹 페이지를 PC 브라우저에서 탐색할 때는 스크롤 막대가 있지만, 모바일 브라우저에서 열면 스크롤 막대가 없습니다.
해결책
페이지의 가장 바깥쪽 레이어를 설정합니다. (저는 페이지를 작성할 때 일반적으로 페이지의 내용을 저장하기 위해 body 태그에 큰 컨테이너를 작성합니다.) set Overflow:auto/scroll; 키:100% 절대 안돼요)
예
<body> <div style=overflow:scroll/auto;> //웹페이지 콘텐츠</div></body>질문 2: touchstart 및 touchend 이벤트 사용
문제 설명
touch.js 파일을 도입하고 touchstart 및 touchend 이벤트를 사용하여 대화형 효과를 얻을 때 일부 휴대폰에서 이벤트 트리거 실패 문제가 발생합니다. [예: 낮은 버전 Honor 휴대폰]
해결책
방법 1: RemoveEventListener 및 addEventListener를 함께 사용
방법 2: 기본적으로 일부 휴대폰이 점프하는 것을 방지하려면 e.preventDefault()를 추가하세요.
방법 3: Jquery의 on이 이벤트 바인딩을 구현합니다.
참고: 방법 1과 방법 2는 모두 이벤트 수신을 구현하기 위해 addEventListener를 사용하는 기본 JS이며 dom 요소가 touchstart 및 touchend 이벤트를 사용하는 경우 이벤트 바인딩 또는 이벤트 수신과 함께 사용해야 합니다. 그렇지 않으면 js 부분에서 오류가 발생합니다. 예외.
암호
//방법 1: document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById(' list5').addEventListener('touchend',callback, false);document.getElementById('list5').removeEventListener('touchend',callback, false);//방법 2: document.getElementById('list5').addEventListener('touchstart',function(e){ e. 방지Default();}, false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false); 질문 3: 길게 누르면 충돌 문제시나리오 복원
XXX 목록 페이지가 있습니다. 낮은 버전의 휴대폰에서는 목록 페이지에서 목록 항목을 길게 누르는 경우(텍스트 터치) 충돌이 발생합니다.
해결책
js 부분: 기본 동작을 방지하기 위해 이벤트가 트리거될 때 e.preventDefault()를 추가합니다.
CSS 부분: 텍스트 복사를 금지하는 코드 추가
암호
//js 부분: e.preventDefault(); //css 부분: -webkit-touch-callout: none; //충돌 해결 방법 //복사 비활성화 -moz-user-select: none;-khtml-user-select: 없음;사용자 선택: 없음;질문 4: 모바일 단말기에서 1px 문제
문제 설명
휴대폰마다 픽셀 밀도가 다르기 때문에 CSS의 1px는 모바일 장치의 1px와 동일하지 않습니다. 해당 프로젝트에서는 모바일 화면 적응을 위해 js와 rem을 사용하기 때문에 0.5px 상황이 발생하여 하위 버전의 휴대폰에서는 0.5px 테두리를 표시하지 못하는 현상이 발생합니다.
해결책
CSS를 사용하여 1px 문제를 해결하고 1px로 설정해야 하는 dom 요소에 border-width:1px;을 직접 작성합니다.
암호
//HTML 부분: <div class='class1'></div>//css 부분: .class1{ border: 1px solid #ccc;}//css part/*모바일 단말기 시작 시 1px가 정상적으로 표시되지 않는 문제 */% border-1px{ 디스플레이: 블록; 위치:절대; 왼쪽: 0; 너비: 100% 내용: ' ';}.border-1px{ 위치: &::after{ @extend %border-1px; 하단: 0; 테두리 상단: 1px 솔리드 #ccc; @extend %border-1px; 상단: 1px 솔리드 #ccc; 웹킷-최소 장치-픽셀-비율:1.5),(최소-장치-픽셀-비율:1.5){ .border-1px{ &::after{ -webkit-transform: scaleY(0.7); 변환: scaleY(0.7) } }}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio :2){ .border-1px{ &::after{ -webkit-transform: scaleY(0.5); 변환: scaleY(0.5) } }}/*모바일 단말에서 1px가 정상적으로 표시되지 않는 문제*/ 문제 5: js는 = 기호가 포함된 URL의 매개변수 값을 올바르게 구문 분석할 수 없습니다.문제 설명
프로젝트에서는 데이터 요청의 매개변수 값을 URL 주소에서 가져오고 매개변수 값에 = 기호가 포함되어 있기 때문에 매개변수 값을 올바르게 구문 분석할 수 없습니다. (ps:js는 = 기호를 사용하여 URL의 매개변수를 구분합니다. )
해결책
URL을 트랜스코딩한 후 디코딩합니다. [이 프로젝트에서 APP는 트랜스코딩된 URL 주소를 제공하고 프런트 엔드는 geturlparams 플러그인을 사용하여 URL 주소의 매개변수 값을 얻습니다.]
암호
//Decode = number dom.token = decodeURI($.query.get(token)); //플러그인 //디코딩하지 않고 값 가져오기 dom.msgid = $.query.get(msgid);질문 6: 기본 js 이벤트 수신 및 jquery 이벤트 바인딩은 iOS에서 유효하지 않습니다.
문제 설명
이벤트 청취 또는 이벤트 바인딩을 사용할 때 상위 요소가 본문 또는 문서 요소를 선택하기 때문에 iOS에서 이벤트 트리거가 유효하지 않습니다.
해결책
본문 및 문서 요소를 상위 요소로 사용하지 마세요.
질문 7: iOS에서 날짜가 NaN으로 표시됩니다.문제 설명
날짜의 날짜 형식은 iOS에서 호환성 문제가 있습니다. iOS의 날짜는 NaN으로 표시됩니다.
해결책
해결 방법: 2017/12/26 19:36:00은 ios에서는 지원되지만, 2017-12-26 19:36:00 형식은 지원하지 않습니다. 후자 형식은 ios에서 Nan을 표시합니다(안드로이드에서는 정상적으로 표시될 수 있습니다).
암호
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);//시간 형식의 '-'를 iOS와 호환되는 '/' 형식으로 변환질문 8: iOS의 클릭 이벤트에 문제가 있습니다
문제 설명
클릭 이벤트가 iOS 클릭에 의해 트리거되면 이벤트 위임의 상위 요소 모듈이 선택되고[즉, 이벤트 버블링으로 인해 상위 요소에 기본 스타일이 있음] 투명 레이어가 있게 됩니다. 예를 들어
<ul> <li>목록 항목 1</li> <li>목록 항목 2</li> <li>목록 항목 3</li></ul>
분석: 예를 들어 iOS 사용자가 목록 항목 1을 클릭하면 상위 레이어의 UL이 투명한 스타일을 갖게 됩니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.