移动端兼容和适配问题

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

  • 解决方案:将背景图片放大为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="../../assets/1.png"/>
      <img src="../../assets/2.png"/>
      <img src="../../assets/3.png"/>
    </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="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
$("img.lazy").lazyload(threshold : 200);

/*当用户禁用JavaScript时默认显示的图像
<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
<script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>

手机中网页的放大和缩小

  • 解决方案:禁用用户的缩放功能
    <meta name="viewport" content="user-scalable=0"/>

格式的自动识别

  • 解决方案:禁用自动识别页面中的格式
    <meta name="format-detection" content="telephone=no">

移动端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 {
             100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        #allmap {
             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="http://api.map.baidu.com/api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi"></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>

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

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底部输入框被键盘遮挡问题

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

自动适应屏幕宽度

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

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

/*max-最大宽度以下的布局为..min-最小宽度以上的布局为: 具有覆盖效果*/
@media (max- 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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Lazy-Cat/p/9904006.html