安卓浏览器看背景图片，有些设备会模糊 解决方案:将背景图片放大为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; } ios和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.htmlhttps://www.cnblogs.com/Lazy-Cat/p/9904006.html