常見的移動端H5頁面開發(fā)遇到的坑和解決辦法

轉(zhuǎn)自:https://www.cnblogs.com/LiuJL/p/7744473.html

1拯田、安卓瀏覽器看背景圖片震捣,有些設備會模糊岛蚤。

用同等比例的圖片在PC機上很清楚,但是手機上很模糊到涂,原因是什么呢脊框?

經(jīng)過研究,是devicePixelRatio作怪践啄,因為手機分辨率太小浇雹,如果按照分辨率來顯示網(wǎng)頁,這樣字會非常小屿讽,所以蘋果當初就把iPhone 4的960640分辨率昭灵,在網(wǎng)頁里只顯示了480320,這樣devicePixelRatio=2》ヌ福現(xiàn)在android比較亂烂完,有1.5的,有2的也有3的诵棵。

想讓圖片在手機里顯示更為清晰抠蚣,必須使用2x的背景圖來代替img標簽(一般情況都是用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;

或者指定 background-size:contain;都可以柄冲,大家試試吻谋!

2、圖片加載

若您遇到圖片加載很慢的問題羊初,對這種情況滨溉,手機開發(fā)一般用canvas方法加載:

具體的canvas API 參見:http://javascript.ruanyifeng.com/htmlapi/canvas.html

下面舉例說明一個canvas的例子:

<li><canvas></canvas></li>

js動態(tài)加載圖片和li 總共舉例17張圖片什湘!

var?total=17;

var?zWin=$(window);

var?render=function(){

?var?padding=2;

?var?winWidth=zWin.width();

?var?picWidth=Math.floor((winWidth-padding*3)/4);

?var?tmpl?='';

?for?(var?i=1;i<=totla;i++){

?var?p=padding;

?var?imgSrc='img/'+i+'.jpg';

?if(i%4==1){

? p=0;

?}

?tmpl?+='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';

?var?imageObj?=?new?Image();

?imageObj.index?=?i;

?imageObj.onload?=?function(){

? ?var?cvs?=$('#cvs_'+this.index)[0].getContext('2d');

? ?cvs.width?=?this.width;

? ?cvs.height=this.height;

? ?cvs.drawImage(this,0,0);

?}

?imageObj.src=imgSrc;

?}

}

render();


3长赞、假如手機網(wǎng)站不用兼容IE瀏覽器,一般我們會使用zeptojs闽撤。

zeptojs內(nèi)置Touch events方法得哆,具體可以看http://zeptojs.com/#Touch events

看了一下zeptio新版的API,已經(jīng)支持IE10以上瀏覽器哟旗,對zeptojs可以選擇使用贩据!


4、防止手機中網(wǎng)頁放大和縮小闸餐。

這點是最基本的饱亮,最為手機網(wǎng)站開發(fā)者來說應該都知道的,就是設置meta中的viewport

還有就是舍沙,有些手機網(wǎng)站我們看到如下聲明:

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

設置了DTD的方式是XHTML的寫法近上,假如我們頁面運用的是html5,可以不用設置DTD,直接聲明<!DOCTYPE html>拂铡。

使用viewport使頁面禁止縮放壹无。 通常把user-scalable設置為0來關閉用戶對頁面視圖縮放的行為

<meta?name="viewport"?content="user-scalable=0"?/>

但是為了更好的兼容,我們會使用完整的viewport設置感帅。

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

當然斗锭,user-scalable=0,有的人也寫成user-scalable=no,都可以的失球。

5岖是、apple-mobile-web-app-capable


apple-mobile-web-app-capable是設置Web應用是否以全屏模式運行。

語法:<meta?name="apple-mobile-web-app-capable"?content="yes">

說明:

如果content設置為yes实苞,Web應用會以全屏模式運行豺撑,反之,則不會硬梁。content的默認值是no前硫,表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網(wǎng)頁是否以全屏模式顯示荧止。


6屹电、format-detection

format-detection 啟動或禁用自動識別頁面中的電話號碼阶剑。

語法:<meta?name="format-detection"?content="telephone=no">

說明:

默認情況下,設備會自動識別任何可能是電話號碼的字符串危号。設置telephone=no可以禁用這項功能牧愁。

7、html5調(diào)用安卓或者ios的撥號功能


html5提供了自動調(diào)用撥號的標簽外莲,只要在a標簽的href中添加tel:就可以了猪半。

如下:<a?href="tel:10010">10010</a>

8、html5GPS定位功能?具體請看:http://www.w3school.com.cn/html5/html_5_geolocation.asp

9偷线、上下拉動滾動條時卡頓磨确、慢

body {

?-webkit-overflow-scrolling: touch;

?overflow-scrolling: touch;

}

10、禁止復制声邦、選中文本

Element?{

?-webkit-user-select:?none;

?-moz-user-select:?none;

?-khtml-user-select:?none;

? user-select:?none;

}

解決移動設備可選中頁面文本(視產(chǎn)品需要而定)

11乏奥、長時間按住頁面出現(xiàn)閃退

element?{

?-webkit-touch-callout:?none;

}

12、iphone及ipad下輸入框默認內(nèi)陰影

Element{

?-webkit-appearance:?none;

}

13亥曹、ios和android下觸摸元素時出現(xiàn)半透明灰色遮罩

Element?{

?-webkit-tap-highlight-color:rgba(255,255,255,0)

}


https://blog.csdn.net/weixin_30235225/article/details/96247334?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-5&spm=1001.2101.3001.4242

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末邓了,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子媳瞪,更是在濱河造成了極大的恐慌骗炉,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛇受,死亡現(xiàn)場離奇詭異句葵,居然都是意外死亡,警方通過查閱死者的電腦和手機龙巨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門笼呆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人旨别,你說我怎么就攤上這事诗赌。” “怎么了秸弛?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵铭若,是天一觀的道長。 經(jīng)常有香客問我递览,道長叼屠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任绞铃,我火速辦了婚禮镜雨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘儿捧。我一直安慰自己荚坞,他們只是感情好挑宠,可當我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著颓影,像睡著了一般各淀。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上诡挂,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天碎浇,我揣著相機與錄音,去河邊找鬼璃俗。 笑死奴璃,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的旧找。 我是一名探鬼主播溺健,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼麦牺,長吁一口氣:“原來是場噩夢啊……” “哼钮蛛!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起剖膳,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤魏颓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后吱晒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體甸饱,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年仑濒,在試婚紗的時候發(fā)現(xiàn)自己被綠了叹话。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡墩瞳,死狀恐怖驼壶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情喉酌,我是刑警寧澤热凹,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站泪电,受9級特大地震影響般妙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜相速,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一碟渺、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧突诬,春花似錦苫拍、人聲如沸烹棉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽浆洗。三九已至,卻和暖如春集峦,著一層夾襖步出監(jiān)牢的瞬間伏社,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工塔淤, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留摘昌,地道東北人。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓高蜂,卻偏偏與公主長得像聪黎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子备恤,可洞房花燭夜當晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容