h5自动调整位置地图加窗口

最新推荐文章于 2022-12-06 16:20:07 发布

我想种大白菜

最新推荐文章于 2022-12-06 16:20:07 发布

阅读量387

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_49946357/article/details/121676645

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {
width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";
}

#up-map-div{
width:18%;
height:90%;
top:2%;
right:1%;
position:absolute;
z-index:9999;
border:1px solid blue;
background-color:#FFFFFF;
opacity:0.8;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
   <script>


       var availWidth=document.body.offsetWidth
       var availHeight=document.body.offsetHeight;
       div();
       function div(){

//判断窗口
   if(availWidth>=availHeight){
   document.write('<div id="allmap"></div><div id="up-map-div"></div>');
       }else{
           document.write('<div id="allmap" style="height:100%;"></div><div id="up-map-div" style="width: 100%;height: 100%;top: 40%;right: 0px;"></div>');
       }
       }
       var bool=availWidth>=availHeight;
       function relo(){
           var availWidths=document.body.offsetWidth
           var availHeights=document.body.offsetHeight;
           var bools=availWidths>=availHeights;
           if(bool!=bools){
           location.reload();
           }

       }

//监听窗口变化
window.addEventListener('resize', relo);
</script>
</body>
</html>

我想种大白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5自动调整位置地图加窗口

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {wid
复制链接

扫一扫

h5自动调整位置 地图 加窗口

h5自动调整位置地图加窗口