我是作為一個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);
哈哈，暫時這么多了。大部分都是從網上摘下來的。但是這些效果都不錯。總結一下。分享一下。希望大家看到的，對你們有點用處。