监听屏幕的改变:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <meta content="telephone=no" name="format-detection">
</head>
<body>
    <label id="show"></label>
    <script>
        window.onresize = adjuest;
        adjuest();
        function adjuest(){
            var label = document.getElementById("show");
            label.innerHTML = "width = "+window.innerWidth+";height="+window.innerHeight;
        }
    </script>
</body>
</html>

效果:
20160812112241229.gif

2 .监听div大小的改变

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="show_div" style="background-color: lightblue;width: 100%;height: 300px;"></div>
    <label id="show"></label>
    <script>
        window.onresize = adjuest;
        adjuest();
        function adjuest(){
            var label = document.getElementById("show");
            var divCon = document.getElementById("show_div");
            label.innerHTML = "width = "+divCon.offsetWidth+";height="+divCon.offsetHeight;
        }
    </script>
</body>
</html>

效果:
20160812113147380.gif

版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.liweiliang.com/773.html

标签: none

仅有一条评论

  1. 谢谢,好文章,非常喜欢。

评论已关闭