我是作为一个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="https://img.zhankr.net/4quah3m0frr245279.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);
哈哈，暂时这么多了。大部分都是从网上摘下来的。但是这些效果都不错。总结一下。分享一下。希望大家看到的，对你们有点用处。
