|
前言 在平時(shí)的H5移動(dòng)端開發(fā)時(shí)，我們難免會(huì)遇到各種各樣的坑點(diǎn)，這篇文章就帶著大家來(lái)看看怎么解決，文章較長(zhǎng)，建議收藏方便以后查閱！ 前方高能！ 視頻兼容相關(guān) 在安卓中，直接使用原生 video 會(huì)導(dǎo)致全屏播放，蓋住所有元素，因此使用 x5 播放器。但是 x5 播放器還是存在問題，雖然不會(huì)蓋住元素，但是會(huì)自己添加特效（蓋一層導(dǎo)航欄蒙層）。 這樣可以在安卓下使用 x5 播放器， playsInline 及 webkit-playsinline 屬性可以在 iOS 環(huán)境下啟用內(nèi)聯(lián)播放。但是通過(guò)屬性設(shè)置內(nèi)聯(lián)播放兼容性并不怎么好，所以這時(shí)候我們需要使用 iphone-inline-video 這個(gè)庫(kù)，通過(guò) 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ī)分辨率太小,如果按照分辨率來(lái)顯示網(wǎng)頁(yè)字會(huì)非常小,所以蘋果就把iPhone 4的960640分辨率在網(wǎng)頁(yè)里只顯示了480320,這樣devicePixelRatio＝2;現(xiàn)在android比較亂,有1.5/2/3等,想讓圖片在手機(jī)里顯示更為清晰必須使用2x的背景圖來(lái)代替img標(biāo)簽(一般情況都是用2倍),例如一個(gè)div的寬高是100100,背景圖必須得200200,然后background-size:contain;,這樣顯示出來(lái)的圖片就比較清晰了;代碼如下: 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; 啟動(dòng)或禁用自動(dòng)識(shí)別頁(yè)面中的電話號(hào)碼; 默認(rèn)情況下設(shè)備會(huì)自動(dòng)識(shí)別任何可能是電話號(hào)碼的字符串,設(shè)置telephone=no可以禁用這項(xiàng)功能,設(shè)置不識(shí)別郵箱和地址也同理 h5網(wǎng)站input設(shè)置為type=number的問題 h5網(wǎng)頁(yè)input的type設(shè)置為number一般會(huì)產(chǎn)生三個(gè)問題: 問題1:maxlength屬性不好用 |
|
|
