轉(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