从事移动端开发后，总结一下遇到的问题，持续更新中……

最新推荐文章于 2023-06-28 18:30:26 发布

daoke_li

最新推荐文章于 2023-06-28 18:30:26 发布

阅读量448

点赞数

分类专栏：前端前端移动开发文章标签： android ios web app javascript html5

本文链接：https://blog.csdn.net/daoke_li/article/details/105120333

版权

前端同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端移动开发

31 篇文章 1 订阅

订阅专栏

移动端通用

低版本的问题：

不支持es6中的api方法，如startWith，padStart等等

解决：用babel-polyfill

// 安装 
npm install --save babel-polyfill

// js中引入 
import 'babel-polyfill';

不支持css原生变量

解决：如果有less环境就写成less变量

@c_primary: #2283E2;
 …… 
[type=radio]:checked + label {
 color: @c_primary;
 }

不支持flex布局部分属性

放弃flex布局
使用postcss-preset-env(待研究)

低版本安卓调试环境

卸载当前高版本浏览器，安装包中的56版本
把C:\Program Files (x86)\Google\Update下面的GoogleUpdate.exe重命名以不让自动升级
把包中的3个文件夹拷贝到C:\Users\86180\AppData\Local\Google\Chrome\User Data\Default下面，覆盖
手机上安装chrome浏览器56版本(不知起作用了没)
打开inspect，按正常步骤调试即可

其他问题

react脚手架+antd-mobile移动端环境搭建 https://blog.csdn.net/daoke_li/article/details/106255031
一个元素设置背景色及高度后，和一个元素的某条边框设置同样的背景色和高度，在手机上表现不一样，后者颜色看起来要深一些。解决：全部使用背景色或边框

antd-mobile中引入antd-mobile-upload后，上传点击事件要连续点2次才生效，解决方案是模拟单击事件连续触发两次，注意不是双击。

<span className={'replaceBtn'} onClick={()=>{
    $('.rc-upload').click().click()
}}>
    {this.state.mainImg.slice(-3) === 'mp4' ? '更换视频' : '更换图片'}
</span>

禁止移动端双指或双击缩放，但meta中的user-scalable=no等不起作用时，可以用如下方法：

//禁止双指放大
        document.documentElement.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        }, {passive:false});
        // 禁止双击放大
        let lastTouchEnd = 0;
        document.documentElement.addEventListener('touchend', function (event) {
            var now = Date.now();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, {passive:false});

react中antd-mobile的组件如Switch阻止冒泡的方法
解决：在Switch外面包一层div，在这个div上使用react事件的阻止方法：onClick={e=>e.stopPropagation()}
圆形按钮旋转动画时被切掉一块
解决：装按钮的盒子宽度减去1像素 https://blog.csdn.net/daoke_li/article/details/111686464
.

ios

判断是否ISO以及iphoneX

const {screen} = window;
const u = navigator.userAgent;
const isIOS = Boolean(u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/));
if (isIOS) {
    window.mobileModel = 'iphone';
    $body.addClass('iphone');
    if ((screen.height === 812 && screen.width === 375)||(screen.height === 896 && screen.width === 414)) { // iphoneX
         window.mobileModel = 'iphoneX';
         $body.addClass('iphoneX');
    }
}

长按后抬起手指会触发点击事件

解决：在长按回调中阻止默认的点击事件(尝试中)

onTouchStart(e) {
     timeOutEvent = setTimeout(() => {
         this.setState({ showDelete: true });
         timeOutEvent = 0;
     }, 500);
 } 
onTouchEnd(e) { 
    // 在触屏操作后，手指提起的一刹那（即发生ontouchend后），系统会判断接收到事件的element的内容是    否被改变。
    // 如果内容被改变，接下来的事件都不会触发，如果没有改变，会按照mousedown，mouseup，click的顺序触发事件。 
    if(timeOutEvent===0){
         e.preventDefault(); // 阻止ios默认触发的点击事件
     }
     clearTimeout(timeOutEvent);
}

页面最后一个div的下外边距自动为0.

在最后写个空div，判断是否ISO来显示或设置高度。

不支持固定背景图片的属性

写个div绝对定位到最下层

<img>元素的css属性content为空（''）时，此元素在IOS上不显示，但安卓上正常显示。

那就不要这样写了。

IOS滑动滚动不能实时触发事件

参见《使用better-scroll解决IOS上滑动事件不能实时触发的问题》：

https://blog.csdn.net/daoke_li/article/details/106101803

IOS上input的type为search时，软键盘不出现搜索按钮

{/* 用Form包裹起来是为了兼容IOS，软键盘上出现搜索按钮 */}
<form action='' onSubmit={e => e.preventDefault()}>
    <input
        className={val ? 'hasVal' : ''}
        type='search'
        value={val}
        onChange={e => setVal(e.target.value)}
        placeholder={!focused ? placeholder || '通过菜谱名称搜索菜谱' : ''}
        onFocus={() => setFocused(true)}
       onBlur={() => setFocused(false)}
       ref={el => input.current = el}
    />
    <i className={'iconfont i-search ' + (!focused ? ' noCancel' : '')} />
    {showCancelBtn && <span className={'cancel'} onClick={cancel}>取消</span>}
</form>

输入框和旁边的文本没对齐

input不要设置高度，而是用行高撑开，这样安卓和IOS就基本一致了。

使用了-webkit-line-clamp来限制行数后，三个点有时和行末的最后一个字重叠

文本设置为左对齐即可，两端对齐会出现这个问题，据说此现象是ios的bug。

iOS中软键盘弹出堵住了输入框

让滚动条重新定位到当前获取的滚动条高度处。

注意这个动作不能写在获得焦点事件中，否则连续得焦、失焦又会出现其他异常，如下写在表单首次加载后即可。

参考代码：

useEffect(() => {
        formOpen && textArea.current.focus()
        const {scrollHeight} = document.body
        setTimeout(() => {
            isIOS && window.scrollTo(0, scrollHeight)
        }, 300)
    }, [formOpen])

IOS上传图片/照片时的格式判断

const type = path.slice(path.lastIndexOf('.') + 1)
if (!['jpg', 'jpeg', 'png', 'heic', 'plist'].includes(type.toLowerCase())) {
    Toast.info('图片只支持jpg、jpeg、png')
    return
}

安卓

移动端react/H5开发通过JS捕捉安卓物理返回键的实践
参见 https://blog.csdn.net/daoke_li/article/details/106683503

其他

vivo x7 顶部导航fixed定位问题

现象：vivo x7上一个顶端定位的元素位置不对，而且还显示了2个。
期望：实际上这个顶部导航，在页面上滑时通过css将背景颜色渐入变白。
尝试：由于这个现象是平台测试反馈回来的，我们这边没有对应的手机，无法重现。试了一个比这个安卓版本(5.1)更低的手机(5.0)是正常的。最后经过查看元素，发现导航栏所在的父元素也用了position:fixed定位，去掉好像也没什么影响，于是去掉发版。
结果：测试那边人反馈正常了！
结论：除了fixed嵌套，也有可能是当时手机卡住了吧！