問(wèn)題一:用同等比例的圖片在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:50px50px;background-size:50px50px;display:inline-block; width:100%; height:50px;
問(wèn)題二:防止手機(jī)中網(wǎng)頁(yè)放大和縮小
這點(diǎn)是手機(jī)站開(kāi)發(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è)面運(yùn)用的是h5可以不用設(shè)置DTD,直接聲明
使用viewport使頁(yè)面禁止縮放,通常把user-scalable設(shè)置為0來(lái)關(guān)閉用戶對(duì)頁(yè)面視圖縮放的行為
為了更好的兼容,我們使用完整的viewport設(shè)置
問(wèn)題三:如何設(shè)置Web應(yīng)用以全屏模式運(yùn)行
apple-mobile-web-app-capable是設(shè)置Web應(yīng)用是否以全屏模式運(yùn)行;語(yǔ)法:
//content設(shè)置為yesWeb應(yīng)用會(huì)以全屏模式運(yùn)行,反之則不會(huì);content的默認(rèn)值是no,表示正常顯示,可以通過(guò)只讀屬性window.navigator.standalone來(lái)確定網(wǎng)頁(yè)是否以全屏模式顯示
問(wèn)題四:如何啟動(dòng)或禁用自動(dòng)識(shí)別頁(yè)面中的電話號(hào)碼
html5提供了自動(dòng)調(diào)用撥號(hào)的標(biāo)簽,只要在a標(biāo)簽的href中添加tel:就可以了
10010
format-detection可以啟動(dòng)或禁用自動(dòng)識(shí)別頁(yè)面中的電話號(hào)碼;語(yǔ)法:
//默認(rèn)情況下設(shè)備會(huì)自動(dòng)識(shí)別任何可能是電話號(hào)碼的字符串,設(shè)置telephone=no可以禁用這項(xiàng)功能,設(shè)置不識(shí)別郵箱和地址也同理
問(wèn)題五:h5網(wǎng)站input設(shè)置為type=number的問(wèn)題
h5網(wǎng)頁(yè)input的type設(shè)置為number一般會(huì)產(chǎn)生三個(gè)問(wèn)題:
問(wèn)題1:maxlength屬性不好用
解決,我目前用的是js
functioncheckTextLength(obj, length){if(obj.value.length > length)? {? ? ? ? ? ? obj.value = obj.value.substr(0, length);? ? ? ? }? ? }
問(wèn)題2:form提交的時(shí)候默認(rèn)取整
因?yàn)閒orm提交默認(rèn)做了表單驗(yàn)證,step默認(rèn)是1,要設(shè)置step屬性,假如保留2位小數(shù),寫法如下:
//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之間
問(wèn)題3:部分安卓手機(jī)出現(xiàn)樣式問(wè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下無(wú)法修改按鈕樣式,測(cè)試還發(fā)現(xiàn),加了此屬性后,iOS下默認(rèn)還是有圓角的,不過(guò)可以用border-radius屬性修改}
問(wèn)題六:select下拉選擇設(shè)置問(wèn)題
問(wèn)題1:右對(duì)齊實(shí)現(xiàn)
設(shè)置如下屬性
selectoption{direction: rtl;}
問(wèn)題2:喚起select的option展開(kāi)
zepto方式:
$(sltElement).trrgger("mousedown");
原生js方式:
functionshowDropdown(sltElement){varevent;event= document.createEvent('MouseEvents');event.initMouseEvent('mousedown',true,true, window);? ? sltElement.dispatchEvent(event);};
問(wèn)題3:禁用select默認(rèn)箭頭
::-ms-expand修改表單控件下拉箭頭,設(shè)置隱藏并使用背景圖片來(lái)修飾
select::-ms-expand{display:none; }
問(wèn)題4:使用appearance改變webkit瀏覽器的默認(rèn)外觀
input,select{-webkit-appearance:none;appearance: none; }
問(wèn)題七:移動(dòng)端click事件延遲的問(wèn)題
移動(dòng)端的點(diǎn)擊事件都會(huì)有300ms延遲,是因?yàn)闉g覽器在等待你是否執(zhí)行雙擊,但此延遲導(dǎo)致用戶體驗(yàn)不好,解決這個(gè)問(wèn)題,我們的方案如下：
1.盡量都使用touch事件來(lái)替換click事件,例如用touchend事件(推薦)
2.用preventDefault阻止a標(biāo)簽的click
3.用script標(biāo)簽引入fastclick庫(kù)去除延遲,實(shí)驗(yàn)證明fastclick比tap要快
4.zepto的touch模塊,tap事件也是可以解決在click的延遲問(wèn)題
5.延遲一定的時(shí)間(300ms+)來(lái)處理事件(不推薦)
6.以上一般都能解決,實(shí)在不行就換成click事件
7.觸摸事件的響應(yīng)順序?yàn)閠ouchstart-->touchmove-->touchend-->click,也可以通過(guò)綁定ontouchstart事件,加快對(duì)事件的響應(yīng),解決300ms延遲問(wèn)題
8.若移動(dòng)設(shè)備兼容性正常的話(IE/Firefox/Safari(IOS 9.3)及以上)只需加上下面meta標(biāo)簽即可把viewport設(shè)置成設(shè)備的實(shí)際像素,就不會(huì)有300ms的延遲
click事件的延遲會(huì)導(dǎo)致移動(dòng)端點(diǎn)透問(wèn)題
案例如下:
事件測(cè)試www.xxx.com
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左右延遲的,也就是說(shuō)tap觸發(fā)之后蒙層隱藏click沒(méi)有觸發(fā),300ms之后由于蒙層消失click觸發(fā)到了下面的a鏈接上;解決方案同上面的click事件延遲
問(wèn)題八:移動(dòng)端HTML5 audio autoplay失效問(wèn)題
由于自動(dòng)播放網(wǎng)頁(yè)中的音頻或視頻會(huì)給用戶帶來(lái)困擾或不必要的流量消耗,所以蘋果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用JS的觸發(fā)播放,必須由用戶來(lái)觸發(fā)才播放;解決方法思路:先通過(guò)用戶touchstart觸碰觸發(fā)播放并暫停(讓音頻開(kāi)始加載),后面用JS再操作就沒(méi)問(wèn)題了;解決代碼:
document.addEventListener('touchstart',function(){document.getElementsByTagName('audio')[0].play();document.getElementsByTagName('audio')[0].pause();});
問(wèn)題九:移動(dòng)端樣式兼容處理
當(dāng)今的手機(jī)端,屏幕分辨率各有不同,為了讓頁(yè)面可以兼容各款手機(jī),解決方案如下:
1.設(shè)置meta標(biāo)簽viewport屬性,使其無(wú)視設(shè)備的真實(shí)分辨率,直接通過(guò)dpi在物理尺寸和瀏覽器之間重設(shè)分辨率,從而達(dá)到能有統(tǒng)一的分辨率的效果,并且禁止掉用戶縮放
2.使用rem進(jìn)行屏幕適配,設(shè)置好root元素的font-size大小,然后在開(kāi)發(fā)的時(shí)候所有與像素有關(guān)的布局統(tǒng)一換成rem單位;針對(duì)不同的手機(jī)使用媒體查詢對(duì)root元素font-size進(jìn)行調(diào)整
問(wèn)題十:CSS動(dòng)畫頁(yè)面閃白,動(dòng)畫卡頓,圖片錯(cuò)亂的問(wèn)題
解決方法:
1.盡可能地使用合成屬性transform和opacity來(lái)設(shè)計(jì)CSS3動(dòng)畫,不使用position的left和top來(lái)定位
2.開(kāi)啟硬件加速
-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)開(kāi)啟,從而解決頁(yè)面閃白,保證動(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.頁(yè)面中的滑動(dòng)刷新在某些手機(jī)中出現(xiàn)卡頓滑不動(dòng)的情況,以下給出可行的解決方案:
a.關(guān)閉probeType屬性(傳說(shuō)是因?yàn)檫@個(gè)啟用監(jiān)聽(tīng)滾動(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);
問(wèn)題十一:浮動(dòng)子元素?fù)伍_(kāi)父元素盒子高度
解決方法如下：
1.父元素設(shè)置為?overflow: hidden;
2.父元素設(shè)置為?display: inline-block;等
這里兩種方法都是通過(guò)設(shè)置css屬性將浮動(dòng)元素的父元素變成BFC(塊級(jí)格式化上下文)元素,使子元素高度可以撐開(kāi)父元素;不過(guò)最好使用方法1,因?yàn)閕nline-block元素本身會(huì)自帶一些寬高度撐開(kāi)其本身
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就是頁(yè)面上一個(gè)隔離的獨(dú)立容器,容器里面的子元素不會(huì)影響到外面元素,反之亦然
我們?cè)趯慶ss常見(jiàn)的一些問(wèn)題都可以由上面兩條推出猪叙，例如：
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重疊(塌陷)
問(wèn)題十二:往返緩存問(wèn)題
點(diǎn)擊瀏覽器的回退有時(shí)候不會(huì)自動(dòng)執(zhí)行js,特別是在mobilesafari中;這與往返緩存(bfcache)有關(guān)系,解決方法:
window.onunload =function(){};
問(wèn)題十三:定位的坑
1.fixed定位
ios下fixed元素容易定位出錯(cuò),軟鍵盤彈出時(shí)影響fixed元素定位,而android下不會(huì);ios4下不支持position:fixed
解決方案:使用[Iscroll],如：
- .....
2.position定位
Android下彈出軟鍵盤彈出時(shí)影響absolute元素定位;解決方案如下:
varua = navigator.userAgent.indexOf('Android');if(ua>-1){? ? $('.ipt').on('focus',function(){? ? ? ? $('.css').css({'visibility':'hidden'})? ? }).on('blur',function(){? ? ? ? $('.css').css({'visibility':'visible'})? ? })}
3.安卓手機(jī)端軟鍵盤彈出頂起頁(yè)面布局
BODY被頂起的解決辦法：
$('body').height($('body')[0].clientHeight);
問(wèn)題十四:audio元素和video元素在ios和andriod中播放問(wèn)題
問(wèn)題1:音頻/視頻寫法
你的瀏覽器還不支持哦//音頻,寫法一//音頻,寫法二//優(yōu)先播放音樂(lè)bg.ogg,不支持在播放bg.mp3
問(wèn)題2:ios系統(tǒng)手機(jī)無(wú)法自動(dòng)播放音頻/視頻
這個(gè)是蘋果系統(tǒng)限制默認(rèn)不允許自動(dòng)播放音頻/視頻,需要點(diǎn)一下觸發(fā)play()事件才能播放;那么我們可以在頁(yè)面onload后觸發(fā)播放事件:
document.getElementById('music').play();
到這里一般都可以播放音樂(lè)了,如果還不行很有可能是微信的限制
問(wèn)題3:微信的限制
如果是微信的限制,這時(shí)需要調(diào)用微信接口,頁(yè)面先引入:
然后JS寫入微信事件:
document.addEventListener("WeixinJSBridgeReady",function(){document.getElementById('music').play();},false);
小結(jié)
1.audio元素的autoplay屬性在IOS及Android上無(wú)法使用,在PC端正常
2.audio元素沒(méi)有設(shè)置controls時(shí),在IOS及Android會(huì)占據(jù)空間大小,而在PC端Chrome是不會(huì)占據(jù)任何空間
問(wèn)題4:Safari瀏覽器自動(dòng)播放
document.addEventListener('touchstart',function(){? ? ? audio.play();},false);
問(wèn)題5:ios系統(tǒng)不支持動(dòng)畫暫停樣式(animation-play-state)
H5頁(yè)面一般都會(huì)有BGM,也會(huì)提供一個(gè)旋轉(zhuǎn)的音樂(lè)圖標(biāo)供用戶開(kāi)啟關(guān)閉音樂(lè);我們希望當(dāng)用戶點(diǎn)擊音樂(lè)按鈕時(shí)圖標(biāo)停止旋轉(zhuǎn),再點(diǎn)圖標(biāo)順著之前停止的位置繼續(xù)跑動(dòng)畫;animation-play-state是最簡(jiǎn)便的方式,然而ios不支持
目前的解決方案是:音樂(lè)圖標(biāo)負(fù)責(zé)跑動(dòng)畫,圖標(biāo)父級(jí)元素負(fù)責(zé)記錄停止時(shí)的轉(zhuǎn)動(dòng)值
問(wèn)題6:ios系統(tǒng)搖一搖播放音效事件無(wú)效
在實(shí)現(xiàn)搖晃(引用了封裝好的shake.js)手機(jī)觸發(fā)某一音效這個(gè)需求時(shí),發(fā)現(xiàn)在微信中音效沒(méi)有被觸發(fā);后面找到原因:在ios里并沒(méi)有把自定義搖晃事件shake當(dāng)成交互動(dòng)作,而要播放音效需要用戶有交互動(dòng)作;沒(méi)有交互音效就沒(méi)被加載,那么我們先加載音效,結(jié)合上面的微信接口:
document.addEventListener("WeixinJSBridgeReady",function(){shakeMusic.load();},false);
load()過(guò)之后再調(diào)用play()即可聽(tīng)到音效
問(wèn)題十五:防止長(zhǎng)按頁(yè)面元素被選中
解決:加入樣式可禁止用戶進(jìn)行復(fù)制,ios和一般的安卓都可以解決,唯獨(dú)小米自帶瀏覽器還有問(wèn)題
-webkit-touch-callout:none;? //系統(tǒng)默認(rèn)菜單被禁用;可以實(shí)現(xiàn)頁(yè)面因?yàn)殚L(zhǎng)按彈出各種操作窗口-webkit-user-select:none; //webkit瀏覽器? -khtml-user-select:none; //早期瀏覽器 -moz-user-select:none; //火狐 -ms-user-select:none; //IE10 user-select:none;
添加完這段代碼后在IOS上會(huì)有問(wèn)題,這時(shí)發(fā)現(xiàn)input框無(wú)法正在輸入內(nèi)容了;造成這個(gè)原因是-webkit-user-select:none;這個(gè)屬性,解決方法就是在css文件中同時(shí)設(shè)置一下input的屬性,如下:
input {? ? ? ? ? -webkit-user-select:auto;//webkit瀏覽器? ? }
問(wèn)題十六:html5碰到上下拉動(dòng)滾動(dòng)條時(shí)卡頓/慢怎么解決
body{-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}
overflow-x:auto在iOS有兼容問(wèn)題妆兑，解決方法:
-webkit-overflow-scrolling: touch;
問(wèn)題十七:點(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)商定義出來(lái)效果不一樣,可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果
winphone系統(tǒng)點(diǎn)擊標(biāo)簽產(chǎn)生的灰色半透明背景能通過(guò)設(shè)置去掉
特殊說(shuō)明:有些機(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下使用如下代碼
問(wèn)題十八:瀏覽器后退不刷新
這種情況是以前遇到的,這里也說(shuō)下;主要會(huì)發(fā)生在webview里多一點(diǎn),當(dāng)點(diǎn)擊后退時(shí)頁(yè)面以緩存形式出現(xiàn),而不是刷新后的,很多情況下這不是你預(yù)期的效果,解決方法是用js:
window.onpageshow =function(evt){if(evt.persisted){document.body.style.display ="none";? ? location.reload();? }};
onpageshow每次頁(yè)面加載都會(huì)觸發(fā),無(wú)論是從緩存中加載還是正常加載,這是他和onload的區(qū)別;persisted判斷頁(yè)面是否從緩存中讀出
問(wèn)題十九:部分機(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)行修改
問(wèn)題二十:input的placeholder文本位置偏上的情況
input的placeholder會(huì)出現(xiàn)文本位置偏上的情況:PC端設(shè)置line-height等于height能夠?qū)R,而移動(dòng)端仍然是偏上,解決方案時(shí)是設(shè)置css?line-height:normal;
問(wèn)題二十一:transition清除閃屏
-webkit-transform-style: preserve-3d; //設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留3D-webkit-backface-visibility:hidden; //設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶時(shí)是否可見(jiàn)：隱藏-webkit-perspective: 1000;
問(wèn)題二十二:頂部狀態(tài)欄背景色
說(shuō)明:除非你先使用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,則頁(yè)面顯示在狀態(tài)欄的下方,即狀態(tài)欄占據(jù)上方部分;頁(yè)面占據(jù)下方部分魂拦，二者沒(méi)有遮擋對(duì)方或被遮擋;如果設(shè)置為blank-translucent,則頁(yè)面會(huì)充滿屏幕,其中頁(yè)面頂部會(huì)被狀態(tài)欄遮蓋住(會(huì)覆蓋頁(yè)面20px高度，而iphone4和itouch4的Retina屏幕為40px);默認(rèn)值是default搁嗓。
IOS問(wèn)題
問(wèn)題一:IOS中對(duì)input鍵盤事件keyup/keydown/keypress等支持不好的問(wèn)題
用input search做模糊搜索的時(shí)候,在鍵盤里輸入關(guān)鍵詞,會(huì)通過(guò)ajax后臺(tái)查詢?nèi)缓蠓祷財(cái)?shù)據(jù);用input監(jiān)聽(tīng)鍵盤keyup事件,在安卓手機(jī)瀏覽器中是可以的,但是在ios手機(jī)瀏覽器中很慢,用輸入法輸入后并未立刻執(zhí)行相應(yīng)的keyup事件,只有刪除之后才能響應(yīng);經(jīng)查發(fā)現(xiàn),IOS的輸入法(不管是第三方還是自帶)能檢測(cè)到英文或數(shù)字的keyup,但檢測(cè)不到中文的keyup,在輸入中文后需要點(diǎn)回退鍵才開(kāi)始搜索;解決辦法是用html5的oninput事件去代替keyup,通過(guò)如下代碼達(dá)到類似keyup的效果;oninput是HTML5的標(biāo)準(zhǔn)事件,對(duì)檢測(cè)textarea,input:text,input:password和input:search這幾個(gè)元素的內(nèi)容修改后立即被觸發(fā),不像onchange事件要失去焦點(diǎn)才觸發(fā);但oninput事件在IE9以下版本不支持,需要用IE特有的onpropertychange事件替代,這個(gè)事件在用戶界面改變或者使用腳本直接修改內(nèi)容兩種情況下都會(huì)觸發(fā),有以下幾種情況:
1.修改了input:checkbox或input:radio元素的選擇中狀態(tài),checked屬性發(fā)生變化
2.修改了input:text或textarea元素的值,value屬性發(fā)生變化
3.修改了select元素的選中項(xiàng),selectedIndex屬性發(fā)生變化
document.getElementById('testInput').addEventListener('input',function(e){varvalue = e.target.value;//e.target指向事件執(zhí)行時(shí)鼠標(biāo)所點(diǎn)擊區(qū)域的那個(gè)元素;初學(xué)者會(huì)認(rèn)為當(dāng)前事件所綁定的元素就是鼠標(biāo)所點(diǎn)擊的那個(gè)元素,這時(shí)就要看看時(shí)間綁定的元素內(nèi)部有沒(méi)有子元素,如果有e.target指向這個(gè)子元素,如果沒(méi)有e.target和this都指向事件所綁定的元素});
問(wèn)題二:IOS鍵盤字母輸入,默認(rèn)首字母大寫的解決方案
設(shè)置如下屬性
問(wèn)題三:關(guān)于iOS與OS X端字體的優(yōu)化(橫豎屏?xí)霈F(xiàn)字體加粗不一致等)問(wèn)題
iOS瀏覽器橫屏?xí)r會(huì)重置字體大小,設(shè)置text-size-adjust為none可以解決iOS上的問(wèn)題,但桌面版Safari的字體縮放功能會(huì)失效,因此最佳方案是將text-size-adjust為100%
-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;
問(wèn)題四:iOS系統(tǒng)中,中文輸入法輸入英文時(shí),字母之間可能會(huì)出現(xiàn)一個(gè)六分之一空格的問(wèn)題
可以通過(guò)正則去掉
this.value=this.value.replace(/\u2006/g,'');
問(wèn)題五:某些情況下非可點(diǎn)擊元素如(label,span)監(jiān)聽(tīng)click事件,ios下不會(huì)觸發(fā)
針對(duì)此種情況只需對(duì)不觸發(fā)click事件的元素添加一行css代碼即可
cursor: pointer;
問(wèn)題六:ios對(duì)時(shí)間date()的支持不一樣
vardate =newDate("2016-05-31 00:00:00");
這種寫法在安卓和pc上都正常的,唯獨(dú)在ios手機(jī)上會(huì)顯示NAN,調(diào)試發(fā)現(xiàn),ios上只支持格式:
vardate =newDate("2016/05/31");
調(diào)試發(fā)現(xiàn)2016/05/31等同2016-05-31 00:00:00,也就是說(shuō)ios默認(rèn)就是從0開(kāi)始計(jì)算的,我們不需要設(shè)置后面的時(shí)分秒為00:00:00
問(wèn)題七:iOS(safari)標(biāo)簽綁定點(diǎn)擊事件無(wú)效
iOS(safari)有時(shí)候某個(gè)標(biāo)簽綁定點(diǎn)擊事件無(wú)效,加上空的onclick=""就好了,如:<a onclick=""></a>
Android問(wèn)題
問(wèn)題一:flex盒模型
1.display:flex;
最新寫法:display:flex;;酷派,三星等安卓手機(jī)需加上display:-webkit-box;兼容,否則子元素中flex:1無(wú)法撐開(kāi)寬度
2.flex-wrap:wrap;
三星手機(jī)中flex盒模型的子元素必須用display:inline-block;;如果是block則三星手機(jī)不會(huì)換行,如果是inline元素(比如)則寬度不會(huì)撐開(kāi)仍然表現(xiàn)為內(nèi)聯(lián)元素
3.flex-direction: column;
三星手機(jī)不支持,無(wú)法使用margin-top:auto使子元素自動(dòng)在最下
4.flex元素中嵌套flex
三星手機(jī)出錯(cuò),必須父元素為flex,而其它祖先元素為block
問(wèn)題二:text-indent和box-sizing
部分安卓機(jī)中使用text-indent屬性會(huì)使元素寬度超過(guò)100%,加上box-sizing:border-box;修復(fù)正常
微信問(wèn)題
問(wèn)題一:微信二維碼問(wèn)題
1.同一個(gè)頁(yè)面里要是有兩個(gè)二維碼晨另，長(zhǎng)按掃描總是只能掃出左側(cè)/第一個(gè)二維碼
解決:可視區(qū)域內(nèi)只能出現(xiàn)一個(gè)二維碼
2.使用meta標(biāo)簽縮放頁(yè)面后長(zhǎng)按二維碼圖片無(wú)反應(yīng)
解決:使用以下代碼后就能長(zhǎng)按識(shí)別二維碼了~
二維碼圖片不要寫為背景,不然長(zhǎng)按沒(méi)辦法觸發(fā)掃描功能,應(yīng)使用img標(biāo)簽引入;有時(shí)掃描二維碼后會(huì)跳轉(zhuǎn)至某個(gè)地址,不幸的話QQ或者微信會(huì)對(duì)這個(gè)地址進(jìn)行溫馨提醒,這樣會(huì)阻止部分用戶繼續(xù)訪問(wèn),從而無(wú)法很好的將用戶引導(dǎo)到活動(dòng)想要推廣的產(chǎn)品/品牌頁(yè)面,如App的下載頁(yè)面等,因此二維碼的掃描測(cè)試不能少;舉例:如果二維碼掃描結(jié)果是應(yīng)用的下載地址的,可以使用應(yīng)用寶的微下載地址生成二維碼,這就不會(huì)被"溫馨提醒"了
