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

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

        });

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

 

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;

   }

移动端动画

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

 (注:打√的标识支持,红色的√表示在移动端下推荐这样做,打×的表示不支持)

公共部分:

         * {
            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>

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

 

当点击按钮后:

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

 

示例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>

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

 

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

 

上一篇:【PHP基础】序列化serialize()与反序列化unserialize()


下一篇:[源码解析] 并行分布式框架 Celery 之 worker 启动 (1)