首页 > 其他分享> 文章详细

移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画

2021-07-11 15:31:41 阅读：170 来源： 互联网

标签：function 兼容性浏览器 dest requestAnimationFrame window position 移动

H5标签之浏览器兼容性

在移动端时可以放心的使用h5相关的标签

但是如果需要兼容一些低版本的浏览器，例如IE6/7/8，此时可以到【兼容】下载一个 html5shiv.min.js 文件，引入即可

JS之浏览器兼容性

例如在使用requestAnimationFrame之前我们不知道浏览器支不支持，那么就可以通过如下语句去进行判断：

if (window.requestAnimationFrame) {

} else {

}

这样的做法是可以的，但是我想我们还应该考虑一点就是，如果浏览器是部分支持呢？此时又该如何应对？

那么可以像下面这样写：

            var requestAnimationFrame = window.requestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.oRequestAnimationFrame ||

            window.msRequestAnimationFrame ||

            function(fn) {

                setTimeout(fn, 16);

            };

        requestAnimationFrame(function() {

            console.log(1);

        });

CSS3之浏览器兼容性

如果需要兼容一些低版本的浏览器，例如IE6/7/8，此时可以到【兼容】下载一个 modernizr.js 文件，引入即可

例如：

         /*支持的情况下*/

.flexbox header {

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: -o-flex;

display: flex;

justify-content: center;

-ms-align-items: center;

align-items: center;

     }

/* 不支持的情况下 */

.no-flexbox header {

text-align: center;

line-height: 50px;

   }

移动端动画

（注：打√的标识支持，红色的√表示在移动端下推荐这样做，打×的表示不支持）

公共部分：

         * {
            padding: 0;
            margin: 0;
            }

<button id="btn">start</button>
<div id="box" class="box"></div>

示例1--使用CSS3做动画：

 .box {
          width: 100px;
          height: 100px;
          background-color: red;
          /*方式1
          position: absolute;
          transition: left margin-left 1s;
          */
          /*方式2
          transition: transform 1s;
          */
          transition: transform 1s;
        }

<script>
    var boxEl = document.getElementById('box'),
            btnEl = document.getElementById('btn');
        // innerWidth表示可视区的宽度；dest目标地址
        var dest = window.innerWidth - 100;

        btnEl.addEventListener('click', function() {
            move(boxEl, dest); //方式1
            // boxEl.style.transform = 'translate3d(' + dest + 'px,0,0)'; 方式2
        }, false);

        function move(el, position) {
            el.style.transform = 'translate3d(' + position + 'px, 0, 0)';
        }
</script>

当点击按钮后：

示例2--使用JS：

 .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

 <script>
        var requestAnimationFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            function(fn) {
                setTimeout(fn, 16);
            };


        // 获取相关元素
        var boxEl = document.getElementById('box'),
            btnEl = document.getElementById('btn');

        // 设置目标地址
        var dest = window.innerWidth - 100,

            speed = 10, //设置速度
            position = 0; //设置初始位置

        btnEl.addEventListener('click', function() {
            requestAnimationFrame(step);
        }, false);

        function move(el, position) {
            el.style.transform = 'translate3d(' + position + 'px, 0, 0)';
        }

        function step() {
            // 先判断当前位置到没到目标位置
            if (position < dest) {

                // 更新
                position += speed;

                // 运动一步
                move(boxEl, position);

                // 运动完后请求下一个位置
                requestAnimationFrame(step);
            } else { //如果大于等于了目标位置
                // 就让它等于目标位置将其移回来
                position = dest;
                move(boxEl, position);
            }
        }
</script>

标签：function,兼容性,浏览器,dest,requestAnimationFrame,window,position,移动
来源： https://blog.csdn.net/weixin_43285360/article/details/118651657