移动端开发兼容性问题汇总

冷不防 2024-04-18 13:30 69阅读 0赞

###### *最新更新时间：2019年09月07日13:27:20* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：移动端开发兼容性问题

#### 概述 ####

> 在进行移动端开发过程中，会遇到各种问题，大概分为：iOS端兼容性问题、Android端兼容性问题、移动端通用的兼容性问题

#### 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

#### event对象兼容性问题 ####

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

#### iOS 滚动卡顿 ####

-webkit-overflow-scrolling: touch;

#### iOS 滚动异常 ####

> 现象：可滚动区域，内容高度超过DOM元素的固定高度，正常来说内容是可以上下滚动的。Android设备没有问题，但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>
      }
    }

#### event对象的target和currentTarget ####

click(e){ 
    	console.log(e.target);//获取的dom对象是点击的那个元素，比如<span id='2'>shao</span>
    	console.log(e.currentTarget);//获取的dom对象是绑定该事件的那个元素 <div id='parent'></div>
    }
    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%);
    		}
    	}
    }

#### 判断设备是手机还是电脑 ####

#### 允许点击穿透到下面的元素 ####

> 应用场景：移动端页面有蒙层，期望点击蒙层能够穿透并且触发下面元素的事件，具体代码如下：
> 
>  *  如果蒙层元素设置了pointer-events: none;，控制台输出box
>  *  如果蒙层元素没有设置pointer-events属性，控制台输出modal

import React from 'react'
    
    //css
    .container{ 
    	width: 100%;
    	height: 100%;
    	position: relative;
    }
    .container .box{ 
    	width: 10px;
    	height: 10px;
    	background: antiquewhite;
    }
    .container .modal{ 
    	position: fixed;
    	width: 100%;
    	height: 100%;
    	left: 0;
    	top: 0;
    	background: rgba(0,0,0,0.5);
    	z-index: 1;
    	pointer-events: none;
    }
    
    export default class Demo extends React.Component { 
      render(){ 
        return <div className='container'>
          <div className='box' onClick={ ()=>{ console.log('box')}}></div>
          <div className='modal' onClick={ ()=>{ console.log('modal')}}></div>
        </div>
      }
    }

#### 参考资料 ####

*  [用Javascript获取页面元素的位置 - 阮一峰的网络日志][Javascript_ -]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Javascript_ -]: http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460