安卓浏览器看背景图片，有些设备会模糊

• 解决方案:将背景图片放大为div的2X倍(一般为两倍),背景图尽量高清且大于目标div的尺寸

/*原背景(div宽高都为100px)*/.div{    background:url(../../XX.png) no-repeat center center;    background-size: 100px 100px;display:inline-block;}/*兼容后的背景*/.div{    background:url(../../XX.png) no-repeat center center;    background-size: 200px 200px;display:inline-block;}/*或者*/.div{    background:url(../../XX.png) no-repeat center center;    background-size: contain;}

---

图片加载很慢

• 解决方案:1.使用Canvas绘制图片进行预加载;
  2.使用Lazy Load插件

/*方案1*/ /*  获取图片的base64码        * @param {obj}img图片dom对象         * */        function getBase64Image(img) {          let canvas = document.createElement("canvas");          canvas.width = img.width;          canvas.height = img.height;          let ctx = canvas.getContext("2d");          ctx.drawImage(img, 0, 0, img.width, img.height);  //绘制相同图片          return canvas.toDataURL("image/png"); //转换成base64数据        }        
        
          
           
           
         
            /*方案2*//*加载Lazy Load插件,其为jQuery的一个库因此也要加载jQuery插件*/$("img.lazy").lazyload(threshold : 200);/*当用户禁用JavaScript时默认显示的图像 
    $("img.lazy").show().lazyload();

---

手机中网页的放大和缩小

• 解决方案:禁用用户的缩放功能

---

格式的自动识别

• 解决方案:禁用自动识别页面中的格式

---

移动端Gps定位

• 解决方案:引用百度地图的api

---

上下拉动滚动条时卡顿、慢

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

---

是否允许用户复制文本

Element {        -webkit-user-select:none;        -moz-user-select:none;        -khtml-user-select:none;        user-select:none; }

---

长时间按住页面出现闪退

element {    -webkit-touch-callout:none;}

---

iphone及ipad下输入框默认内阴影

Element{        -webkit-appearance:none;}

---

i os和android下触摸元素时出现半透明灰色遮罩

Element {    -webkit-tap-highlight-color:rgba(255,255,255,0)}

---

active兼容处理 即 伪类 :active 失效

• 解决方案:js给 document 绑定 touchstart 或 touchend 事件

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

---

webkit mask 兼容处理

if('WebkitMask'indocument.documentElement.style){    /*支持*/}else{    /*不支持*/}

---

旋转屏幕时，字体大小自动调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{-webkit-text-size-adjust:100%;}

---

transition闪屏

/设置内嵌的元素在3D 空间如何呈现：保留3D /-webkit-transform-style: preserve-3d;/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /-webkit-backface-visibility:hidden;

---

圆角bug

background-clip: padding-box;

---

h5网站input 设置为type=number的问题

• 解决方案:解决max-length和部分手机样式问题

functioncheckTextLength(obj, length) {if(obj.value.length > length)  {obj.value = obj.value.substr(0, length);}}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;}

---

IOS移动端click事件300ms的延迟响应

-解决方案:使用fastclick

window.addEventListener( "load", function() {FastClick.attach( document.body );}, false );

---

点击穿透问题

• 解决方案:使用touch替代click,避免混用.

---

h5底部输入框被键盘遮挡问题

var oHeight = $(document).height(); //浏览器当前的高度      $(window).resize(function(){         if($(document).height() < oHeight){                 $("#footer").css("position","static");    }else{                 $("#footer").css("position","absolute");    }           });

---

自动适应屏幕宽度

---

在pc端的基础上手动调节移动端的布局

/*max-width:最大宽度以下的布局为..min-width:最小宽度以上的布局为: 具有覆盖效果*/@media (max-width: 720px)html {font-size: 62.5%;}

---

参考文档

https://www.cnblogs.com/mazhaokeng/p/8461260.html

https://blog.csdn.net/dengboblog/article/details/53156570

https://blog.csdn.net/diqi77/article/details/54692920

https://www.cnblogs.com/zr123/p/8178740.html