前言

在平時的H5移動端開發(fā)時，我們難免會遇到各種各樣的坑點(diǎn)，這篇文章就帶著大家來看看怎么解決，文章較長，建議收藏方便以后查閱！

前方高能！

視頻兼容相關(guān)

在安卓中，直接使用原生 video 會導(dǎo)致全屏播放，蓋住所有元素，因此使用 x5 播放器。但是 x5 播放器還是存在問題，雖然不會蓋住元素，但是會自己添加特效（蓋一層導(dǎo)航欄蒙層）。

這樣可以在安卓下使用 x5 播放器， playsInline 及 webkit-playsinline 屬性可以在 iOS 環(huán)境下啟用內(nèi)聯(lián)播放。但是通過屬性設(shè)置內(nèi)聯(lián)播放兼容性并不怎么好，所以這時候我們需要使用 iphone-inline-video 這個庫，通過 enableInlineVideo(video) 就可以了。

canvas在retina屏模糊

只需要將畫筆根據(jù)像素比縮放即可run(canvasEl) {    const canvas = canvasEl;    const ctx = canvas.getContext('2d');    const devicePixelRatio = window.devicePixelRatio || 1;    const backingStorePixelRatio = ctx.webkitBackingStorePixelRatio ||    ctx.mozBackingStorePixelRatio ||    ctx.msBackingStorePixelRatio ||    ctx.oBackingStorePixelRatio ||    ctx.backingStorePixelRatio || 1;    const ratio = devicePixelRatio / backingStorePixelRatio;    if (devicePixelRatio !== backingStorePixelRatio) {      const oldWidth = canvas.width;      const oldHeight = canvas.height;      canvas.width = oldWidth * ratio;      canvas.height = oldHeight * ratio;      canvas.style.width = `${oldWidth}px`;      canvas.style.height = `${oldHeight}px`;      ctx.scale(ratio, ratio);    }  },

用同等比例的圖片在PC機(jī)上很清楚,但是手機(jī)上很模糊,原因是什么呢?

經(jīng)研究發(fā)現(xiàn)是devicePixelRatio作怪,因?yàn)槭謾C(jī)分辨率太小,如果按照分辨率來顯示網(wǎng)頁字會非常小,所以蘋果就把iPhone 4的960640分辨率在網(wǎng)頁里只顯示了480320,這樣devicePixelRatio＝2;現(xiàn)在android比較亂,有1.5/2/3等,想讓圖片在手機(jī)里顯示更為清晰必須使用2x的背景圖來代替img標(biāo)簽(一般情況都是用2倍),例如一個div的寬高是100100,背景圖必須得200200,然后background-size:contain;,這樣顯示出來的圖片就比較清晰了;代碼如下:   background:url(../images/icon/all.png) no-repeat center center;   -webkit-background-size:50px 50px;   background-size: 50px 50px;   display:inline-block;    width:100%;    height:50px;

啟動或禁用自動識別頁面中的電話號碼;

默認(rèn)情況下設(shè)備會自動識別任何可能是電話號碼的字符串,設(shè)置telephone=no可以禁用這項(xiàng)功能,設(shè)置不識別郵箱和地址也同理

h5網(wǎng)站input設(shè)置為type=number的問題

h5網(wǎng)頁input的type設(shè)置為number一般會產(chǎn)生三個問題:

問題1:maxlength屬性不好用