我遇到移動端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);

哈哈，暫時這麼多了。大部分都是從網上摘下來的。可是這些效果都不錯。總結一下。分享一下。但願你們看到的，對大家有點用處。