H5開發(fā)中遇到常見問題的和解決方案

時(shí)間：2019-07-07 00:00:00 | 來源：

手機(jī)共通問題

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

經(jīng)研究發(fā)現(xiàn)是devicePixelRatio作怪,因?yàn)槭謾C(jī)分辨率太小,如果按照分辨率來顯示網(wǎng)頁字會(huì)非常小,所以蘋果就把iPhone 4的960640分辨率在網(wǎng)頁里只顯示了480320,這樣devicePixelRatio＝2;現(xiàn)在android比較亂,有1.5/2/3等,想讓圖片在手機(jī)里顯示更為清晰必須使用2x的背景圖來代替img標(biāo)簽(一般情況都是用2倍),例如一個(gè)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;

問題二:防止手機(jī)中網(wǎng)頁放大和縮小

這點(diǎn)是手機(jī)站開發(fā)者都應(yīng)該知道的,就是設(shè)置meta中的viewport;有些手機(jī)站有如下聲明:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

設(shè)置DTD的方式是XHTML的寫法,假如頁面運(yùn)用的是h5可以不用設(shè)置DTD,直接聲明

使用viewport使頁面禁止縮放,通常把user-scalable設(shè)置為0來關(guān)閉用戶對(duì)頁面視圖縮放的行為

<metaname="viewport"content="user-scalable=0" />

為了更好的兼容,我們使用完整的viewport設(shè)置

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

問題三:如何設(shè)置Web應(yīng)用以全屏模式運(yùn)行

apple-mobile-web-app-capable是設(shè)置Web應(yīng)用是否以全屏模式運(yùn)行;語法:

<meta name="apple-mobile-web-app-capable" content="yes"> //content設(shè)置為yesWeb應(yīng)用會(huì)以全屏模式運(yùn)行,反之則不會(huì);content的默認(rèn)值是no,表示正常顯示,可以通過只讀屬性window.navigator.standalone來確定網(wǎng)頁是否以全屏模式顯示

問題四:如何啟動(dòng)或禁用自動(dòng)識(shí)別頁面中的電話號(hào)碼

html5提供了自動(dòng)調(diào)用撥號(hào)的標(biāo)簽,只要在a標(biāo)簽的href中添加tel:就可以了

<ahref="tel:10010">10010</a>

format-detection可以啟動(dòng)或禁用自動(dòng)識(shí)別頁面中的電話號(hào)碼;語法:

<meta name="format-detection" content="telephone=no"> //默認(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)頁input的type設(shè)置為number一般會(huì)產(chǎn)生三個(gè)問題:

問題1:maxlength屬性不好用

解決,我目前用的是js

<input type="number" oninput="checkTextLength(this ,10)"><scripttype="text/javascript">functioncheckTextLength(obj, length) {        if(obj.value.length > length)  {            obj.value = obj.value.substr(0, length);        }    }</script>

問題2:form提交的時(shí)候默認(rèn)取整

因?yàn)閒orm提交默認(rèn)做了表單驗(yàn)證,step默認(rèn)是1,要設(shè)置step屬性,假如保留2位小數(shù),寫法如下:

<input type="number" step="0.01" /> //input中type=number一般會(huì)自動(dòng)生成一個(gè)上下箭頭,點(diǎn)擊上箭頭默認(rèn)增加一個(gè)step,點(diǎn)擊下箭頭默認(rèn)會(huì)減少一個(gè)step;number中默認(rèn)step是1,也就是step=0.01可以允許輸入2位小數(shù),并且點(diǎn)擊上下箭頭分別增加0.01和減少0.01;step和min一起使用時(shí)數(shù)值必須在min和max之間

問題3:部分安卓手機(jī)出現(xiàn)樣式問題

去除input中這些默認(rèn)樣式:

input[type=number] {    -moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{    -webkit-appearance: none;    margin: 0;}

去除input默認(rèn)樣式的方法:

input,textarea {    border: 0;    -webkit-appearance: none; //可同時(shí)屏蔽輸入框怪異的內(nèi)陰影,解決iOS下無法修改按鈕樣式,測(cè)試還發(fā)現(xiàn),加了此屬性后,iOS下默認(rèn)還是有圓角的,不過可以用border-radius屬性修改}

問題六:select下拉選擇設(shè)置問題

問題1:右對(duì)齊實(shí)現(xiàn)

設(shè)置如下屬性

selectoption {    direction: rtl;}

問題2:喚起select的option展開

zepto方式:

$(sltElement).trrgger("mousedown");

原生js方式:

function showDropdown(sltElement) {    varevent;    event = document.createEvent('MouseEvents');    event.initMouseEvent('mousedown', true, true, window);    sltElement.dispatchEvent(event);};

問題3:禁用select默認(rèn)箭頭

::-ms-expand修改表單控件下拉箭頭,設(shè)置隱藏并使用背景圖片來修飾

select::-ms-expand { display:none; }

問題4:使用appearance改變webkit瀏覽器的默認(rèn)外觀

input,select { -webkit-appearance:none; appearance: none; }

問題七:移動(dòng)端click事件延遲的問題

移動(dòng)端的點(diǎn)擊事件都會(huì)有300ms延遲,是因?yàn)闉g覽器在等待你是否執(zhí)行雙擊,但此延遲導(dǎo)致用戶體驗(yàn)不好,解決這個(gè)問題,我們的方案如下：

1.盡量都使用touch事件來替換click事件,例如用touchend事件(推薦)

2.用preventDefault阻止a標(biāo)簽的click

3.用script標(biāo)簽引入fastclick庫去除延遲,實(shí)驗(yàn)證明fastclick比tap要快

4.zepto的touch模塊,tap事件也是可以解決在click的延遲問題

5.延遲一定的時(shí)間(300ms+)來處理事件(不推薦)

6.以上一般都能解決,實(shí)在不行就換成click事件

7.觸摸事件的響應(yīng)順序?yàn)閠ouchstart-->touchmove-->touchend-->click,也可以通過綁定ontouchstart事件,加快對(duì)事件的響應(yīng),解決300ms延遲問題

8.若移動(dòng)設(shè)備兼容性正常的話(IE/Firefox/Safari(IOS 9.3)及以上)只需加上下面meta標(biāo)簽即可把viewport設(shè)置成設(shè)備的實(shí)際像素,就不會(huì)有300ms的延遲

<metaname="viewport"content="width=device-width">

click事件的延遲會(huì)導(dǎo)致移動(dòng)端點(diǎn)透問題

案例如下:

<divid="haorooms">事件測(cè)試</div><ahref="#">www.xxx.com</a>

div是絕對(duì)定位的蒙層且z-index高于a,我們給div綁定tap事件：

$('#haorooms').on('tap',function(){    $('#haorooms').hide();});

我們點(diǎn)擊蒙層時(shí)div正常消失,但是當(dāng)我們?cè)赼標(biāo)簽上點(diǎn)擊蒙層時(shí),發(fā)現(xiàn)a鏈接被觸發(fā),這就是所謂的點(diǎn)透事件

原因:touchstart早于touchend早于click,即click的觸發(fā)是有300ms左右延遲的,也就是說tap觸發(fā)之后蒙層隱藏click沒有觸發(fā),300ms之后由于蒙層消失click觸發(fā)到了下面的a鏈接上;解決方案同上面的click事件延遲

問題八:移動(dòng)端HTML5 audio autoplay失效問題

由于自動(dòng)播放網(wǎng)頁中的音頻或視頻會(huì)給用戶帶來困擾或不必要的流量消耗,所以蘋果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用JS的觸發(fā)播放,必須由用戶來觸發(fā)才播放;解決方法思路:先通過用戶touchstart觸碰觸發(fā)播放并暫停(讓音頻開始加載),后面用JS再操作就沒問題了;解決代碼:

document.addEventListener('touchstart', function () {    document.getElementsByTagName('audio')[0].play();    document.getElementsByTagName('audio')[0].pause();});

問題九:移動(dòng)端樣式兼容處理

當(dāng)今的手機(jī)端,屏幕分辨率各有不同,為了讓頁面可以兼容各款手機(jī),解決方案如下:

1.設(shè)置meta標(biāo)簽viewport屬性,使其無視設(shè)備的真實(shí)分辨率,直接通過dpi在物理尺寸和瀏覽器之間重設(shè)分辨率,從而達(dá)到能有統(tǒng)一的分辨率的效果,并且禁止掉用戶縮放

<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

2.使用rem進(jìn)行屏幕適配,設(shè)置好root元素的font-size大小,然后在開發(fā)的時(shí)候所有與像素有關(guān)的布局統(tǒng)一換成rem單位;針對(duì)不同的手機(jī)使用媒體查詢對(duì)root元素font-size進(jìn)行調(diào)整

問題十:CSS動(dòng)畫頁面閃白,動(dòng)畫卡頓,圖片錯(cuò)亂的問題

解決方法:

1.盡可能地使用合成屬性transform和opacity來設(shè)計(jì)CSS3動(dòng)畫,不使用position的left和top來定位

2.開啟硬件加速

-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); //可以觸發(fā)硬件加速,從而讓瀏覽器在渲染動(dòng)畫時(shí)從CPU轉(zhuǎn)向GPU

目前像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速,當(dāng)檢測(cè)到某個(gè)DOM元素應(yīng)用了某些CSS規(guī)則時(shí)就會(huì)自動(dòng)開啟,從而解決頁面閃白,保證動(dòng)畫流暢

3.各種應(yīng)用的webview(例如微信)在遇到有大量圖片時(shí)會(huì)出現(xiàn)img和background-image互相錯(cuò)亂的情況,6和6plus更為嚴(yán)重,目前暫時(shí)的解決方法也是動(dòng)態(tài)給所有用到圖片的元素加上-webkit-transform:translate3d(0,0,0)

4.頁面中的滑動(dòng)刷新在某些手機(jī)中出現(xiàn)卡頓滑不動(dòng)的情況,以下給出可行的解決方案:

a.關(guān)閉probeType屬性(傳說是因?yàn)檫@個(gè)啟用監(jiān)聽滾動(dòng)狀態(tài)的很耗性能,關(guān)閉這個(gè)屬性滑動(dòng)就會(huì)流暢很多)

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

b.給scroll元素增加css樣式:-webkit-transform:translate3d(0,0,0);

問題十一:浮動(dòng)子元素?fù)伍_父元素盒子高度

解決方法如下：

1.父元素設(shè)置為 overflow: hidden;

2.父元素設(shè)置為 display: inline-block;等

這里兩種方法都是通過設(shè)置css屬性將浮動(dòng)元素的父元素變成BFC(塊級(jí)格式化上下文)元素,使子元素高度可以撐開父元素;不過最好使用方法1,因?yàn)閕nline-block元素本身會(huì)自帶一些寬高度撐開其本身

BFC產(chǎn)生的條件:

1.html根元素

2.float的值不為none

3.display的值為inline-block/table-cell/table-caption

4.position的值為absolute或fix

5.overflow的值不為visible

BFC約束規(guī)則：

1.生成BFC元素的子元素會(huì)一個(gè)接一個(gè)的放置;垂直方向上他們的起點(diǎn)是一個(gè)包含塊的頂部,倆個(gè)相鄰子元素之間垂直距離取決于元素margin特性,在BFC中相鄰的塊級(jí)元素外邊距會(huì)折疊

2.生成BFC元素的子元素中每個(gè)子元素的外邊距和包含塊的左邊界相接觸(對(duì)于從右到左的格式化,右外邊距和右邊界相接觸),除非這個(gè)子元素也創(chuàng)建一個(gè)新的BFC(如它自身也是一個(gè)浮動(dòng)元素)

3.BFC的區(qū)域不會(huì)與float的元素區(qū)域重疊

4.計(jì)算BFC高度時(shí)浮動(dòng)元素也參與計(jì)算

5.BFC就是頁面上一個(gè)隔離的獨(dú)立容器,容器里面的子元素不會(huì)影響到外面元素,反之亦然

我們?cè)趯慶ss常見的一些問題都可以由上面兩條推出，例如：

1.Block元素與父元素同寬，所以Block元素豎直方向上垂直排列。

2.豎直方向上有的Block元素margin會(huì)重疊，水平方向不會(huì)。

3.浮動(dòng)元素會(huì)盡量接近左上方或右上方。

4.為父元素設(shè)置overflow:hidden或浮動(dòng)父元素，則父元素會(huì)包含其浮動(dòng)的子元素。

BFC有很多實(shí)際的用處,例如防止相鄰block的豎直margin重疊(塌陷)

問題十二:往返緩存問題

點(diǎn)擊瀏覽器的回退有時(shí)候不會(huì)自動(dòng)執(zhí)行js,特別是在mobilesafari中;這與往返緩存(bfcache)有關(guān)系,解決方法:

window.onunload = function(){};

問題十三:定位的坑

1.fixed定位

ios下fixed元素容易定位出錯(cuò),軟鍵盤彈出時(shí)影響fixed元素定位,而android下不會(huì);ios4下不支持position:fixed

解決方案:使用[Iscroll],如：

<divid="wrapper"><ul><li></li>               .....        </ul></div><scriptsrc="iscroll.js"></script><script>var myscroll;    functionloaded(){        myscroll=new iScroll("wrapper");    }    window.addEventListener("DOMContentLoaded",loaded,false);</script>

2.position定位

Android下彈出軟鍵盤彈出時(shí)影響absolute元素定位;解決方案如下:

var ua = navigator.userAgent.indexOf('Android');if(ua>-1){    $('.ipt').on('focus', function(){        $('.css').css({'visibility':'hidden'})    }).on('blur', function(){        $('.css').css({'visibility':'visible'})    })}

3.安卓手機(jī)端軟鍵盤彈出頂起頁面布局

BODY被頂起的解決辦法：

$('body').height($('body')[0].clientHeight);

問題十四:audio元素和video元素在ios和andriod中播放問題

問題1:音頻/視頻寫法

<audiosrc="music/bg.mp3"autoplayloopcontrols>你的瀏覽器還不支持哦</audio> //音頻,寫法一<audiocontrols="controls"> //音頻,寫法二       <sourcesrc="music/bg.ogg"type="audio/ogg"></source><sourcesrc="music/bg.mp3"type="audio/mpeg"></source> //優(yōu)先播放音樂bg.ogg,不支持在播放bg.mp3    </audio>

問題2:ios系統(tǒng)手機(jī)無法自動(dòng)播放音頻/視頻

這個(gè)是蘋果系統(tǒng)限制默認(rèn)不允許自動(dòng)播放音頻/視頻,需要點(diǎn)一下觸發(fā)play()事件才能播放;那么我們可以在頁面onload后觸發(fā)播放事件:

document.getElementById('music').play();

到這里一般都可以播放音樂了,如果還不行很有可能是微信的限制

問題3:微信的限制

如果是微信的限制,這時(shí)需要調(diào)用微信接口,頁面先引入:

<scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

然后JS寫入微信事件:

document.addEventListener("WeixinJSBridgeReady", function() {    document.getElementById('music').play();}, false);

小結(jié)

1.audio元素的autoplay屬性在IOS及Android上無法使用,在PC端正常

2.audio元素沒有設(shè)置controls時(shí),在IOS及Android會(huì)占據(jù)空間大小,而在PC端Chrome是不會(huì)占據(jù)任何空間

問題4:Safari瀏覽器自動(dòng)播放

document.addEventListener('touchstart', function(){       audio.play();}, false);

問題5:ios系統(tǒng)不支持動(dòng)畫暫停樣式(animation-play-state)

H5頁面一般都會(huì)有BGM,也會(huì)提供一個(gè)旋轉(zhuǎn)的音樂圖標(biāo)供用戶開啟關(guān)閉音樂;我們希望當(dāng)用戶點(diǎn)擊音樂按鈕時(shí)圖標(biāo)停止旋轉(zhuǎn),再點(diǎn)圖標(biāo)順著之前停止的位置繼續(xù)跑動(dòng)畫;animation-play-state是最簡便的方式,然而ios不支持

目前的解決方案是:音樂圖標(biāo)負(fù)責(zé)跑動(dòng)畫,圖標(biāo)父級(jí)元素負(fù)責(zé)記錄停止時(shí)的轉(zhuǎn)動(dòng)值

問題6:ios系統(tǒng)搖一搖播放音效事件無效

在實(shí)現(xiàn)搖晃(引用了封裝好的shake.js)手機(jī)觸發(fā)某一音效這個(gè)需求時(shí),發(fā)現(xiàn)在微信中音效沒有被觸發(fā);后面找到原因:在ios里并沒有把自定義搖晃事件shake當(dāng)成交互動(dòng)作,而要播放音效需要用戶有交互動(dòng)作;沒有交互音效就沒被加載,那么我們先加載音效,結(jié)合上面的微信接口:

document.addEventListener("WeixinJSBridgeReady", function () {shakeMusic.load();}, false);

load()過之后再調(diào)用play()即可聽到音效

問題十五:防止長按頁面元素被選中

解決:加入樣式可禁止用戶進(jìn)行復(fù)制,ios和一般的安卓都可以解決,唯獨(dú)小米自帶瀏覽器還有問題

-webkit-touch-callout:none;  //系統(tǒng)默認(rèn)菜單被禁用;可以實(shí)現(xiàn)頁面因?yàn)殚L按彈出各種操作窗口-webkit-user-select:none; //webkit瀏覽器  -khtml-user-select:none; //早期瀏覽器 -moz-user-select:none; //火狐 -ms-user-select:none; //IE10 user-select:none;

添加完這段代碼后在IOS上會(huì)有問題,這時(shí)發(fā)現(xiàn)input框無法正在輸入內(nèi)容了;造成這個(gè)原因是-webkit-user-select:none;這個(gè)屬性,解決方法就是在css文件中同時(shí)設(shè)置一下input的屬性,如下:

input {           -webkit-user-select:auto; //webkit瀏覽器    }

問題十六:html5碰到上下拉動(dòng)滾動(dòng)條時(shí)卡頓/慢怎么解決

body {    -webkit-overflow-scrolling: touch;    overflow-scrolling: touch;}

overflow-x:auto在iOS有兼容問題，解決方法:

-webkit-overflow-scrolling: touch;

問題十七:點(diǎn)擊元素產(chǎn)生背景或邊框怎么去掉

ios用戶點(diǎn)擊一個(gè)鏈接會(huì)出現(xiàn)一個(gè)半透明灰色遮罩,如果想要禁用可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩

android用戶點(diǎn)擊一個(gè)鏈接會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩,不同生產(chǎn)商定義出來效果不一樣,可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果

winphone系統(tǒng)點(diǎn)擊標(biāo)簽產(chǎn)生的灰色半透明背景能通過設(shè)置去掉

特殊說明:有些機(jī)型去除不了,如小米2,對(duì)于按鈕類還有個(gè)辦法,不使用a或input標(biāo)簽,直接用div標(biāo)簽

a,button,input,textarea{     -webkit-tap-highlight-color: rgba(0,0,0,0);     -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個(gè)副作用,就是輸入法不再能夠輸入多個(gè)字符}或a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

在winphone下使用如下代碼

<metaname="msapplication-tap-highlight"content="no">

問題十八:瀏覽器后退不刷新

這種情況是以前遇到的,這里也說下;主要會(huì)發(fā)生在webview里多一點(diǎn),當(dāng)點(diǎn)擊后退時(shí)頁面以緩存形式出現(xiàn),而不是刷新后的,很多情況下這不是你預(yù)期的效果,解決方法是用js:

window.onpageshow = function(evt){  if(evt.persisted){      document.body.style.display ="none";     location.reload();  }};

onpageshow每次頁面加載都會(huì)觸發(fā),無論是從緩存中加載還是正常加載,這是他和onload的區(qū)別;persisted判斷頁面是否從緩存中讀出

問題十九:部分機(jī)型存在type為search的input自帶close按鈕樣式修改方法

有些機(jī)型的搜索input控件會(huì)自帶close按鈕(一個(gè)偽元素),而通常為了兼容所有瀏覽器我們會(huì)自己實(shí)現(xiàn)一個(gè),此時(shí)去掉原生close按鈕的方法為

#Search::-webkit-search-cancel-button{    display: none;  }

如果想使用原生close按鈕又想使其符合設(shè)計(jì)風(fēng)格,可以對(duì)這個(gè)偽元素的樣式進(jìn)行修改

問題二十:input的placeholder文本位置偏上的情況

input的placeholder會(huì)出現(xiàn)文本位置偏上的情況:PC端設(shè)置line-height等于height能夠?qū)R,而移動(dòng)端仍然是偏上,解決方案時(shí)是設(shè)置css line-height:normal;

問題二十一:transition清除閃屏

-webkit-transform-style: preserve-3d; //設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留3D-webkit-backface-visibility:hidden; //設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶時(shí)是否可見：隱藏-webkit-perspective: 1000;

問題二十二:頂部狀態(tài)欄背景色

<metaname="apple-mobile-web-app-status-bar-style"content="black" />

說明:除非你先使用apple-mobile-web-app-capable指定全屏模式,否則這個(gè)meta標(biāo)簽不會(huì)起任何作用;如果content設(shè)置為default,則狀態(tài)欄正常顯示;如果設(shè)置為blank,則狀態(tài)欄會(huì)有一個(gè)黑色的背景;如果設(shè)置為blank-translucent,則狀態(tài)欄顯示為黑色半透明;如果設(shè)置為default或blank,則頁面顯示在狀態(tài)欄的下方,即狀態(tài)欄占據(jù)上方部分;頁面占據(jù)下方部分，二者沒有遮擋對(duì)方或被遮擋;如果設(shè)置為blank-translucent,則頁面會(huì)充滿屏幕,其中頁面頂部會(huì)被狀態(tài)欄遮蓋住(會(huì)覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕為40px);默認(rèn)值是default。

上海藍(lán)暢信息技術(shù)有限公司成功為多家世界財(cái)富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開發(fā)供應(yīng)商。

服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無錫、廈門、重慶、西安等大中型城市及地區(qū) 主要業(yè)務(wù)：H5開發(fā)，H5外包，微信開發(fā)外包，網(wǎng)站開發(fā)外包，H5游戲開發(fā)，小程序開發(fā)外包，APP開發(fā)外包，視頻后期制作等

H5開發(fā),小程序開發(fā)供應(yīng)商