모 바 일 개발 호환성 문제 집계

최신 업데이트 시간:2019 년 09 월 07 일 13:27:20《 - - 》
본문 내용:모 바 일 개발 호환성 문제
개술
모 바 일 개발 과정 에서 여러 가지 문제 가 발생 할 수 있 습 니 다.주로 iOS 엔 드 호환성 문제,안 드 로 이 드 엔 드 호환성 문제,모 바 일 엔 드 에서 통용 되 는 호환성 문제 로 나 눌 수 있 습 니 다.
input 요소 초점 가 져 오기 기본 키보드 팝 업 막 기

//           readonly  
<input readonly />
//iOS           (  )   -               
<input readonly onfocus='this.blur();' />
//  input       ，                 size  
<input readonly onfocus='this.blur();' size="5" value="abc"/>

어떤 원 소 를 가 져 와 조상 원 소 를 지정 합 니 다.

//element-     specified-       
function getSpecifiedParentElement(element,specified){
	var current = element;
	while (current !== null){
		if(current.className.indexOf('specified-class') != -1)
			break;
		current = current.offsetParent;
	}
	return current
}

어떤 요소 의 밑변 거리 페이지 아래쪽 거 리 를 가 져 옵 니 다.

//     -             -      
let domBottom2PageBottom = document.documentElement.clientHeight - curElement.getBoundingClientRect().top - curElement.clientHeight;

//element-     specified-       
function getSpecifiedParentElement(element,specified){
	var current = element;
	while (current !== null){
		if(current.className.indexOf('specified-class') != -1)
			break;
		current = current.offsetParent;
	}
	return current
}

어떤 요 소 를 구체 적 인 위치 로 스크롤 합 니 다.

//addHeight-       
let element
element.scrollTop = addHeight + element.scrollTop;//current.scrollTop            

그림 을 길 게 누 르 면 팝 업 저장 상자 가 금 지 됩 니 다.

img{
	pointer-events: none;
}

주의:

이 그림 에 이 속성 이 설정 되 어 있 지 않 으 면 이 그림 의 직접 부모 요소 인 onTouchStart 이 벤트 는 e.target.parentNode 로 이 그림 의 직접 부모 요소 인 DOM 을 가 져 와 야 합 니 다

이 그림 이 이 속성 을 설정 하면 이 그림 의 직접 부모 요소 인 onTouchStart 사건 은 e.target 으로 이 그림 의 직접 부모 요소 인 DOM 을 가 져 와 야 합 니 다

이벤트 대상 호환성 문제

function abc(e){
	e = e ? e : window.event;
}

iOS 스크롤 카드

-webkit-overflow-scrolling: touch;

iOS 스크롤 이상
현상:스크롤 가능 영역,내용 높이 가 DOM 요소 의 고정 높이 를 초과 하여 정상적으로 내용 은 상하 로 스크롤 할 수 있 습 니 다.안 드 로 이 드 장 치 는 문제 가 없 지만 iOS 장 치 는 첫 번 째 로 아래로 굴 러 서 굴 러 갈 수 없고 고무줄 효과 가 나타 나 고무줄 효 과 를 촉발 한 후 두 번 째 로 정상적으로 굴 러 갈 수 있다.

첫 번 째 상황:조사 결과 DOM 요소 가 사용 하 는flex구 조 는 이런 현상 을 초래 했다

두 번 째 상황:DOM 의 하위 요 소 를 굴 릴 수 있 는 설정overflow-x: scroll구체 적 인 코드 는 다음 과 같다

import React from 'react'

let styles = {
	.modal{
		position: fixed;
    	width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    background: rgba(0,0,0,0.4);
	    z-index: 1;
	    .box{
			width: 300px;
			max-height: 250px;
			background: #FFFFFF;
			border-radius: 20px;
			text-align: left;
			padding: 0 20px 10px;
			overflow-y: scroll;
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.title{
			.scroolX{
				/*          ，                 */
				overflow-x: scroll;
			}
		}
	}
}

export default class Modal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }
  
  render() {
    return <div className={styles.modal}>
	    <div className={styles.box}>
	    	<div className={styles.title}>
	    		<span>some text</span>
	    		<div style={{overflowX:'scroll'}}></div>
	    	</div>
	    	<div className={styles.text}>    ，    box  </div>
	    </div>
    </div>
  }
}

이벤트 대상 의 target 과 currentTarget

click(e){
	console.log(e.target);//   dom          ，  shao
	console.log(e.currentTarget);//   dom              

}
render() {
    return (<div id='parent' onClick={(e)=>{this.click(e)}}>
    	<span id='1'>wan</span>
    	<span id='2'>shao</span>
    	<span id='3'>bo</span>
	</div>
    )
  }

iOS端图片在父元素内偏下方显示

现象：如下布局方案，在Android端图片在父元素中水平垂直居中，但在iOS端图片偏下方显示

import React from 'react'

let styles = {
	.box{
		width: 50px;
		height: 50px;
		text-align: center;//      
		img{
			width: 20px;
			height: 15px;
			pointer-events: none;//           
		}
	}
}

export default class Modal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }
  
  render() {
    return <div className={styles.box}>
		<img src={require('./wanshaobo.png')}/>
	</div>
  }
}

호환성 방안 은 다음 과 같 습 니 다.다음 스타일 을 추가 합 니 다.

let styles = {
	.box{
		position: relative;
		img{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
}

참고 자료

Javascript 으로 페이지 요소 의 위 치 를 가 져 옵 니 다.-완 일 봉 의 네트워크 로그

읽 어 주 셔 서 감사합니다. 댓 글 환영 합 니 다^-^ ^-^