移动端ios系统遇到的一些坑和解决办法

    

移动端ios系统遇到的一些坑和解决办法

我是作为一个H5移动端开发。主要是做跨平台兼容ios系统和Android系统。

在移动端中,最让我头疼的不是功能,不是业务逻辑。而是适配。俗话说:移动端适配是最头疼的事情,也是头发掉得最快的时候。

我在移动端开发中遇到很多坑。主要是发生在适配ios系统中,无论从页面布局还是插件的使用,ios 感觉有些独特。

我写移动端主要是应用两种框架H5+ 还有cordova。前端我主要是用的vue.js

今天呢,我来总结一下,无论ios 还是Android 系统适配某些插件使用出现的问题和解决办法。

先从页面说起:

(一)。去除ios 和Android 去除页面内容的复制和和input的可以复制和粘贴

* {
    -webkit-touch-callout: none;
    /*系统默认菜单被禁用*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}
input {
    -webkit-touch-callout: auto;
    /*系统默认菜单被禁用*/
    -webkit-user-select: auto;
    /*webkit浏览器*/
    -khtml-user-select: auto;
    /*早期浏览器*/
    -moz-user-select: auto;
    /*火狐*/
    -ms-user-select: auto;
    /*IE10*/
    user-select: auto;
}

(二)。在ios中遇到一串数字可拨打的限制

<meta name="format-detection" content="telephone=no" />

(三)。在iphoneX中页面布局的问题。头部和底部,头部一般是ios原生来搞定的,底部的距离一般是这样控制就ok

body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    // overflow: hidden;
}

(四)。在cordova项目中,在海报合成的时候,使用html2canvas中。图片合成不出来(也就是base64)不能展示的图片跨域污染的问题。图片是要用网络图片。不能用本地图片。合成海报用到了qrcodes和html2Canvas技术,成功前端合成海报。

以后不需要后端来合成啦

    <div class="box_1" ref="box_1">
        <img src="http://xxxx/xx.png" style="width:100%; height:100%" crossOrigin="anonymous">
        <qrcodes id="rqrcodes" :value="qrcodeUrl" v-if="qrcodeUrl" :options="{ size: 170 }" />
    </div>
html2canvas(that.$refs.box_1, {
    useCORS: true
}).then(canvas => {
    that.imgUrl_1 = canvas.toDataURL("image/png");
});
(五)。在ios中复制粘贴链接的问题。

//执行浏览器复制命令

    copyHandle(message) {
        var input = document.createElement("input");
        input.value = message;
        document.body.appendChild(input);
        input.select();
        input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
        document.body.removeChild(input);
        this.$toast("复制成功");
    }
(六)。在H5中,IOS11以上系统会出现吊起键盘之后,失去焦点,页面整体上滑的情况。
blurClick() {
    var currentPosition, timer;
    var speed = 1; //页面滚动距离
    timer = setInterval(function() {
        currentPosition =
            document.documentElement.scrollTop ||
            document.body.scrollTop;
        currentPosition -= speed;
        window.scrollTo(0, currentPosition); //页面向上滚动
        currentPosition += speed; //speed变量
        window.scrollTo(0, currentPosition); //页面向下滚动
        clearInterval(timer);
    }, 1);
}
(七)。压缩图片上传。先转化base64,然后在在转bold。重点是压缩图片。上代码
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var base64 = canvas.toDataURL("image/jpeg", 0.6);

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://tencent.信息

  近期评论

  •  osc_omoo: 前端加密后端解密吧?你不会用的是nodejs吧?改成java的后端解密麻烦吗?
  •  环洋诚信SSL证书客服: 按照博主的思路和代码,我已经搭建成功了。但是有一个小小的问题想请教下,重新执行安装代码后,之前...
  •  澄弘: 已经添加了你的博客

生活其实很简单,过了今天就是明天。

低头哭过别忘了抬头继续走。

不要被任何人打乱自的脚步,因为没有谁会像你一样清楚和在乎自己梦想。

没有人可以打倒我,除非我自己先趴下!

你要记住你不是为别人而活,你是为自己而活。