移动设备旋转屏幕事件、获得窗体宽高、div屏幕居中

最新推荐文章于 2020-12-31 17:18:23 发布

my--dream

最新推荐文章于 2020-12-31 17:18:23 发布

阅读量280

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/u013238512/article/details/79861073

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

项目演示页面的登录窗需要屏幕居中，并且需要适应移动端设备。这里运用啦layUI的自适应。代码贴出：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>测试操作页</title>
    <link rel="stylesheet" type="text/css" href="/monitor/static/lib/layui-v2.2.5/layui/css/layui.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8">
</head>

<body style="overflow-x:hidden;overflow-y:hidden">
<div id="logbox" class="log_box layui-col-xs10 layui-col-sm8 layui-col-md6 layui-col-xs-offset1 layui-col-sm-offset2 layui-col-md-offset3">
 
</div>
</body>
<script src="/monitor/static/lib/jquery/jquery-2.0.3.min.js"></script>
<script src="/monitor/static/lib/layer/dist/layer.js"
<script src="/monitor/static/lib/all-jquery.js"></script></html>

<script type="application/javascript">
    $(function () {
        var $wind = $(window); //加载窗口
        var winH= $wind.height();//窗口高度
        var winW= $wind.width();//窗口宽
        var logh=$('#logbox').height();
        var margin_top=(winH-logh)/2;//获得高度差的一半
        document.getElementById('logbox').style.marginTop=margin_top.toString()+'px';

//旋转屏幕事件
        window.addEventListener('orientationchange', function(event){
            var $wind2 = $(window);
            var winH2= $wind2.height();//窗口高度
            var winW2= $wind2.width();//窗口宽度   
            var logH2=$('#logbox').height();
            var margin_top=(winH2-logH2)/2;
            document.getElementById('logbox').style.marginTop=margin_top.toString()+'px';
        });
</script>