移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏!
1、安卓浏览器看背景图片，有些设备会模糊
用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？
经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在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;
eg: <li><canvas></canvas></li>
1 js动态加载图片和li 总共举例15张图片！ 2 var total=15; 3 var zWin=$(window); 4 var render=function(){ 5 var padding=2; 6 var winWidth=zWin.width(); 7 var picWidth=Math.floor((winWidth-padding*3)/4); 8 var tmpl =''; 9 for (var i=1;i<=totla;i++){ 10 var p=padding; 11 var imgSrc='img/'+i+'.jpg'; 12 if(i%4==1){ 13 p=0; 14 } 15 tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas >; 16 var imageObj = new Image(); 17 imageObj.index = i; 18 imageObj.onload = function(){ 19 var cvs =$('#cvs_'+this.index)[0].getContext('2d'); 20 cvs.width = this.width; 21 cvs.height=this.height; 22 cvs.drawImage(this,0,0); 23 } 24 imageObj.src=imgSrc; 25 } 26 27 } 28 render();