移动端踩坑史

概要：记录日常开发中移动端一些兼容性问题

IOS下间接触发input的click事件无效

场景描述：手动实现图片上传，使用input type= file，并且隐藏input，通过给其他元素添加click事件，间接的触发input的click事件，如下：

<input type="file" style={{ display: 'none' }} accept="image/*" onChange={this.handleInputChange} ref={upload => this.inputFile = upload}/>

<button onClick={this.handleUpload}>上传图片</button>

handleUpload = (e) =>  {
    this.inputFile && this.inputFile.click();
}

在浏览器上和安卓手机上都没有问题，可以正常的触发文件选择的弹出，IOS上点击却无效
原因：项目引入了fastClick
解决方案：在实际触发点击的元素上加上fastClick的钩子类，即：

<button onClick={this.handleUpload}  className="needsclick">上传图片</button>

在我们使用的antd-design的upload组件中也同样存在这个问题，解决方式同上，不同的是，我们无法直接通过使用ref获得触发点击事件的实际元素，通过如下方式：

componentDidMount() {
    setTimeout(() => {
            const     addClassDOM = ReactDOM.findDOMNode(this.upload).querySelector('span.ant-upload');
            addClassDOM.className += ' needsclick';
    }, 0);
}

<Upload ref={upload => this.upload = upload} />

safari下定义宽高的图片不显示

IOS下和safari中，图片宽高为0px，其他设备显示正常，在使用postcss中引入了插件postcss-viewport-units，对所有元素加了content，不同浏览器对content的表现形式不同，所以加上全局样式

img {
    content: normal !important;
}

参考文章：

1. 记录fastclick中一次手动触发click事件失败
2. 分享手淘过年项目中采用到的前端技术
3. 再聊移动端页面的适配

赏

谢谢打赏

支付宝

微信