九卅娱乐
  咨询电话:15834049009

bet9九州入口

移动端兼容和适配问题

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

解决方案:将背景图片放大为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数据 } <!--需要预加载的图片--> <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:status,points //参照: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(255,255,255,0)}


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-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 );


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=1,user-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