移动端兼容和适配问题

发布日期:2019-02-07

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

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

/*原背景(div宽高都为100px)*/.div{ background:url(../../XX.png) no-repeat center center background-size: 100px 100pxdisplay:inline-block}/*兼容后的背景*/.div{ background:url(../../XX.png) no-repeat center center background-size: 200px 200pxdisplay: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数据 } <!--需要预加载的图片--> <save-img-base64> <img src="{随机图片URL}"/> <img src="{随机图片URL}"/> <img src="{随机图片URL}"/> </save-img-base64> /*方案2*//*加载Lazy Load插件其为jQuery的一个库因此也要加载jQuery插件*/<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></script><img src="{随机图片URL}" data-original="img/example.jpg" width="640" heigh="480">$("img.lazy").lazyload(threshold : 200)/*当用户禁用JavaScript时默认显示的图像<img src="{随机图片URL}" data-original="img/example.jpg" width="640" heigh="480"> <noscript><img src="{随机图片URL}" width="640" heigh="480"></noscript><script type="text/javascript"></script>$("img.lazy").show().lazyload()</script>


3.手机中网页的放大和缩小

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

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


4.格式的自动识别

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

<meta name="format-detection" content="telephone=no">


5.移动端Gps定位

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

<html><head> <meta http-equiv="Content-Type" content="text/html charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0 user-scalable=no" /> <style type="text/css"> body html { width: 100% height: 100% margin: 0 font-family: "微软雅黑" font-size: 14px } #allmap { width: 100% height: 500px } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="{随机图片URL}"></script> <title>获取当前所在地址,不显示地图</title></head><body> <!--<div id="allmap"></div>--> <!--不显示地图--> <div id="allmap" style="display:none"></div></body></html><script type="text/javascript"> $(function () { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition locationError) } else { alert("你的浏览器不支持 GeoLocation.") } }) //定位成功时,执行的函数 function showPosition(position) { // 百度地图API功能 var map = new BMap.Map("allmap") var point = new BMap.Point(116.331398 39.897445) map.centerAndZoom(point 12) var geoc = new BMap.Geocoder() translateCallback = function (res) { alert(res.points.length) $.each(res.points function (index val) { var point = val alert(point.lng + "" + point.lat) var marker = new BMap.Marker(point) map.addOverlay(marker) map.setCenter(point) geoc.getLocation(point function (rs) { var addComp = rs.addressComponents alert(addComp.province + " " + addComp.city + " " + addComp.district + " " + addComp.street + " " + addComp.streetNumber) //var infoWindow = new BMap.InfoWindow(sContent) //map.openInfoWindow(infoWindow point) }) }) }//(point) var convertor = new BMap.Convertor() var points = new Array() points.push(point) //translate(points: Array<BMap.Point> from: number to: number callback: function)//callback返回是一个对象Object,TranslateResults类型 //TranslateResults:statuspoints //参照:JavaScript API-服务类 Convertor TranslateResults http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b49 //其中状态码可参照:WEB服务API-坐标转换API http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition convertor.translate(points 1 5 translateCallback) } // 定位失败时,执行的函数 function locationError(error) { switch (error.code) { case error.PERMISSION_DENIED: alert("User denied the request for Geolocation.") break case error.POSITION_UNAVAILABLE: alert("Location information is unavailable.") break case error.TIMEOUT: alert("The request to get user location timed out.") break case error.UNKNOWN_ERROR: alert("An unknown error occurred.") break } }</script>


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

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


7.是否允许用户复制文本

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


8.长时间按住页面出现闪退

element { -webkit-touch-callout:none}


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

Element{ -webkit-appearance:none}


10、ios和android下触摸元素时出现半透明灰色遮罩

Element { -webkit-tap-highlight-color:rgba(2552552550)}


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

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

document.addEventListener("touchstart"function(){}false)


12.webkit mask 兼容处理

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


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

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


14.transition闪屏

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


15.圆角bug

background-clip: padding-box


16.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-buttoninput[type=number]::-webkit-outer-spin-button {-webkit-appearance:nonemargin:0}


    IOS移动端click事件300ms的延迟响应-解决方案:使用fastclick

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


18.点击穿透问题

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

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

<script src="jquery.js" type="text/javascript"></script>var oHeight = $(document).height() //浏览器当前的高度 $(window).resize(function(){ if($(document).height() < oHeight){ $("#footer").css("position""static") }else{ $("#footer").css("position""absolute") } })


20.自动适应屏幕宽度

<meta name="viewport" content="width=device-width initial-scale=1user-scalable=0">


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

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


参考文档https://www.cnblogs.com/mazhaokeng/p/8461260.htmlhttps://blog.csdn.net/dengboblog/article/details/53156570https://blog.csdn.net/diqi77/article/details/54692920https://www.cnblogs.com/zr123/p/8178740.html